@luzmo/lucero 1.0.1-alpha.5 → 1.0.1-alpha.6
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.
- package/components/color-palette/color-palette.d.ts +6 -2
- package/components/color-palette/index.cjs +1 -1
- package/components/color-palette/index.js +31 -31
- package/components/color-palette-group/color-palette-group.d.ts +79 -0
- package/components/color-palette-group/index.cjs +28 -0
- package/components/color-palette-group/index.d.ts +7 -0
- package/components/color-palette-group/index.js +205 -0
- package/components/index.cjs +1 -1
- package/components/index.js +138 -136
- package/custom-elements.json +1 -1
- package/index.d.ts +1 -0
- package/package.json +6 -1
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { PropertyValues } from 'lit';
|
|
1
2
|
import { Focusable } from '../../utils/focusable';
|
|
2
3
|
declare const LuzmoColorPalette_base: typeof Focusable & {
|
|
3
4
|
new (...args: any[]): import("../..").SizedElementInterface;
|
|
@@ -25,6 +26,10 @@ export declare class LuzmoColorPalette extends LuzmoColorPalette_base {
|
|
|
25
26
|
* Set the color palette to an active state
|
|
26
27
|
*/
|
|
27
28
|
active: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Identifies this color palette within its color palette group
|
|
31
|
+
*/
|
|
32
|
+
value?: string;
|
|
28
33
|
/**
|
|
29
34
|
* Set the colors to be displayed in the color palette
|
|
30
35
|
*/
|
|
@@ -41,9 +46,8 @@ export declare class LuzmoColorPalette extends LuzmoColorPalette_base {
|
|
|
41
46
|
* @internal
|
|
42
47
|
*/
|
|
43
48
|
get focusElement(): HTMLElement;
|
|
44
|
-
private handlePointerdown;
|
|
45
|
-
private handlePointerup;
|
|
46
49
|
protected render(): import("lit-html").TemplateResult<1>;
|
|
47
50
|
protected firstUpdated(changedProperties: Map<string, any>): void;
|
|
51
|
+
protected updated(changes: PropertyValues): void;
|
|
48
52
|
}
|
|
49
53
|
export {};
|
|
@@ -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
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=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}: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([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: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-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-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 b=Object.defineProperty,t=(i,e,a,s)=>{for(var l=void 0,d=i.length-1,p;d>=0;d--)(p=i[d])&&(l=p(e,a,l)||l);return l&&b(e,a,l),l};const c=class c 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}render(){var a;const e=(a=this.colors)==null?void 0:a.map(s=>r.x`<div class="color" style="background-color: ${s}"></div>`);return r.x` <div id="palette">${e}</div> `}firstUpdated(e){super.firstUpdated(e)}updated(e){super.updated(e),e.has("selected")&&this.setAttribute("tabindex",this.selected?"0":"-1"),e.has("disabled")&&(this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"))}};c.styles=r.r(h);let o=c;t([r.n({type:Boolean,reflect:!0})],o.prototype,"disabled");t([r.n({type:Boolean,reflect:!0})],o.prototype,"focused");t([r.n({type:Boolean,reflect:!0})],o.prototype,"selected");t([r.n({type:Boolean,reflect:!0})],o.prototype,"active");t([r.n({type:String,reflect:!0})],o.prototype,"value");t([r.n({type:Array,reflect:!0})],o.prototype,"colors");t([r.n({type:Boolean,reflect:!0})],o.prototype,"reverse");t([r.n({type:Boolean,reflect:!0})],o.prototype,"horizontal");customElements.get("luzmo-color-palette")||customElements.define("luzmo-color-palette",o);exports.LuzmoColorPalette=o;
|
|
@@ -15,23 +15,23 @@
|
|
|
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 m, x as
|
|
18
|
+
import { r as m, x as p, n as e } from "../base-WsynuqaS.js";
|
|
19
19
|
import { F as b } from "../focusable-BxtpnzWp.js";
|
|
20
|
-
import { S as
|
|
21
|
-
const
|
|
20
|
+
import { S as z } from "../sized-mixin-D4ACoVUr.js";
|
|
21
|
+
const n = () => {
|
|
22
22
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
23
23
|
const t = document.createElement("style");
|
|
24
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 v = Object.defineProperty, l = (t,
|
|
27
|
+
n();
|
|
28
|
+
const 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}: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([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: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-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-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, r, c, s) => {
|
|
30
30
|
for (var a = void 0, d = t.length - 1, u; d >= 0; d--)
|
|
31
|
-
(u = t[d]) && (a = u(
|
|
32
|
-
return a && v(
|
|
31
|
+
(u = t[d]) && (a = u(r, c, a) || a);
|
|
32
|
+
return a && v(r, c, a), a;
|
|
33
33
|
};
|
|
34
|
-
const i = class i extends
|
|
34
|
+
const i = class i extends z(b, {
|
|
35
35
|
validSizes: ["s", "m", "l", "xl"],
|
|
36
36
|
noDefaultSize: !0
|
|
37
37
|
}) {
|
|
@@ -42,47 +42,47 @@ const i = class i extends h(b, {
|
|
|
42
42
|
* @internal
|
|
43
43
|
*/
|
|
44
44
|
get focusElement() {
|
|
45
|
-
return this
|
|
46
|
-
}
|
|
47
|
-
handlePointerdown(o) {
|
|
48
|
-
o.pointerType === "touch" && (this.active = !0), this.setPointerCapture(o.pointerId);
|
|
49
|
-
}
|
|
50
|
-
handlePointerup(o) {
|
|
51
|
-
this.active = !1, this.releasePointerCapture(o.pointerId);
|
|
45
|
+
return this;
|
|
52
46
|
}
|
|
53
47
|
render() {
|
|
54
48
|
var c;
|
|
55
|
-
const
|
|
56
|
-
return
|
|
49
|
+
const r = (c = this.colors) == null ? void 0 : c.map((s) => p`<div class="color" style="background-color: ${s}"></div>`);
|
|
50
|
+
return p` <div id="palette">${r}</div> `;
|
|
57
51
|
}
|
|
58
|
-
firstUpdated(
|
|
59
|
-
super.firstUpdated(
|
|
52
|
+
firstUpdated(r) {
|
|
53
|
+
super.firstUpdated(r);
|
|
54
|
+
}
|
|
55
|
+
updated(r) {
|
|
56
|
+
super.updated(r), r.has("selected") && this.setAttribute("tabindex", this.selected ? "0" : "-1"), r.has("disabled") && (this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"));
|
|
60
57
|
}
|
|
61
58
|
};
|
|
62
|
-
i.styles = m(
|
|
63
|
-
let
|
|
59
|
+
i.styles = m(h);
|
|
60
|
+
let o = i;
|
|
64
61
|
l([
|
|
65
62
|
e({ type: Boolean, reflect: !0 })
|
|
66
|
-
],
|
|
63
|
+
], o.prototype, "disabled");
|
|
67
64
|
l([
|
|
68
65
|
e({ type: Boolean, reflect: !0 })
|
|
69
|
-
],
|
|
66
|
+
], o.prototype, "focused");
|
|
70
67
|
l([
|
|
71
68
|
e({ type: Boolean, reflect: !0 })
|
|
72
|
-
],
|
|
69
|
+
], o.prototype, "selected");
|
|
73
70
|
l([
|
|
74
71
|
e({ type: Boolean, reflect: !0 })
|
|
75
|
-
],
|
|
72
|
+
], o.prototype, "active");
|
|
73
|
+
l([
|
|
74
|
+
e({ type: String, reflect: !0 })
|
|
75
|
+
], o.prototype, "value");
|
|
76
76
|
l([
|
|
77
77
|
e({ type: Array, reflect: !0 })
|
|
78
|
-
],
|
|
78
|
+
], o.prototype, "colors");
|
|
79
79
|
l([
|
|
80
80
|
e({ type: Boolean, reflect: !0 })
|
|
81
|
-
],
|
|
81
|
+
], o.prototype, "reverse");
|
|
82
82
|
l([
|
|
83
83
|
e({ type: Boolean, reflect: !0 })
|
|
84
|
-
],
|
|
85
|
-
customElements.get("luzmo-color-palette") || customElements.define("luzmo-color-palette",
|
|
84
|
+
], o.prototype, "horizontal");
|
|
85
|
+
customElements.get("luzmo-color-palette") || customElements.define("luzmo-color-palette", o);
|
|
86
86
|
export {
|
|
87
|
-
|
|
87
|
+
o as LuzmoColorPalette
|
|
88
88
|
};
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
|
|
2
|
+
import { LuzmoElement } from '../../utils/base';
|
|
3
|
+
import { RovingTabindexController } from '../../utils/reactive-controllers/roving-tabindex';
|
|
4
|
+
import { LuzmoColorPalette } from '../color-palette';
|
|
5
|
+
declare const LuzmoColorPaletteGroup_base: typeof LuzmoElement & {
|
|
6
|
+
new (...args: any[]): import("../..").SizedElementInterface;
|
|
7
|
+
prototype: import("../..").SizedElementInterface;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* @element luzmo-color-palette-group
|
|
11
|
+
* @slot - the luzmo-color-palette elements that make up the group
|
|
12
|
+
*
|
|
13
|
+
* @fires change - Announces the color palette value has been changed by user
|
|
14
|
+
*/
|
|
15
|
+
export declare class LuzmoColorPaletteGroup extends LuzmoColorPaletteGroup_base {
|
|
16
|
+
/**
|
|
17
|
+
* The styles of the color palette
|
|
18
|
+
* @internal
|
|
19
|
+
*/
|
|
20
|
+
static get styles(): CSSResultArray;
|
|
21
|
+
/**
|
|
22
|
+
* Set the color palette group to a disabled state
|
|
23
|
+
*/
|
|
24
|
+
disabled: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Set the color palette group to a horizontal state
|
|
27
|
+
*/
|
|
28
|
+
horizontal: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* The color palette elements in the group
|
|
31
|
+
* @internal
|
|
32
|
+
*/
|
|
33
|
+
set palettes(palettes: LuzmoColorPalette[]);
|
|
34
|
+
/**
|
|
35
|
+
* The color palette elements in the group
|
|
36
|
+
* @internal
|
|
37
|
+
*/
|
|
38
|
+
get palettes(): LuzmoColorPalette[];
|
|
39
|
+
/**
|
|
40
|
+
* @internal
|
|
41
|
+
*/
|
|
42
|
+
_palettes: LuzmoColorPalette[];
|
|
43
|
+
constructor();
|
|
44
|
+
rovingTabindexController: RovingTabindexController<LuzmoColorPalette>;
|
|
45
|
+
/**
|
|
46
|
+
* The aria-label of the color palette group
|
|
47
|
+
*/
|
|
48
|
+
label: string;
|
|
49
|
+
/**
|
|
50
|
+
* @internal
|
|
51
|
+
*/
|
|
52
|
+
private _selected?;
|
|
53
|
+
/**
|
|
54
|
+
* The selected color palette value
|
|
55
|
+
*/
|
|
56
|
+
get selected(): string | undefined;
|
|
57
|
+
set selected(selected: string);
|
|
58
|
+
slotElement: HTMLSlotElement;
|
|
59
|
+
private dispatchChange;
|
|
60
|
+
private setSelected;
|
|
61
|
+
focus(options?: FocusOptions): void;
|
|
62
|
+
private deselectSelectedPalettes;
|
|
63
|
+
private _handleClick;
|
|
64
|
+
/**
|
|
65
|
+
* @internal
|
|
66
|
+
*/
|
|
67
|
+
private _onKeyDown;
|
|
68
|
+
private applySelects;
|
|
69
|
+
private manageSelects;
|
|
70
|
+
protected render(): TemplateResult;
|
|
71
|
+
protected firstUpdated(changes: PropertyValues): void;
|
|
72
|
+
protected updated(changes: PropertyValues): void;
|
|
73
|
+
private manageChildren;
|
|
74
|
+
/**
|
|
75
|
+
* @internal
|
|
76
|
+
*/
|
|
77
|
+
private manageColorPalettes;
|
|
78
|
+
}
|
|
79
|
+
export {};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/*! * Lucero - The design system for Luzmo.
|
|
2
|
+
*
|
|
3
|
+
* Copyright © 2025 Luzmo
|
|
4
|
+
* All rights reserved.
|
|
5
|
+
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
+
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
+
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
+
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
+
*
|
|
10
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
+
* SOFTWARE.
|
|
17
|
+
* */
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../base-CBCg3yyw.cjs"),u=require("../mutation-controller-DkOMCW-c.cjs"),d=require("../query-BL-TJj7K.cjs"),p=require("../if-defined-C9YGdo33.cjs"),h=require("../roving-tabindex-By_fCy_e.cjs"),g=require("../sized-mixin-CPxE5C96.cjs"),m=".color-palette-group{column-gap:var(--luzmo-color-palette-group-column-gap, var(--color-palette-group-column-gap));row-gap:var(--luzmo-color-palette-group-row-gap, var(--color-palette-group-row-gap));flex-wrap:wrap;display:flex}::slotted(*){flex-shrink:0}::slotted(:focus-visible){z-index:1}:host{--color-palette-group-column-gap: var(--luzmo-spacing-3);--color-palette-group-row-gap: var(--luzmo-spacing-3)}:host([size=s]){--color-palette-group-column-gap: var(--luzmo-spacing-2);--color-palette-group-row-gap: var(--luzmo-spacing-2)}:host,:host([size=l]),:host([size=xl]){--color-palette-group-column-gap: var(--luzmo-spacing-3);--color-palette-group-row-gap: var(--luzmo-spacing-3)}";var f=Object.defineProperty,b=Object.getOwnPropertyDescriptor,o=(n,e,t,s)=>{for(var a=s>1?void 0:s?b(e,t):e,l=n.length-1,c;l>=0;l--)(c=n[l])&&(a=(s?c(e,t,a):c(a))||a);return s&&a&&f(e,t,a),a};class i extends g.SizedMixin(r.LuzmoElement,{validSizes:["s","m","l","xl"],noDefaultSize:!0}){constructor(){super(),this.disabled=!1,this.horizontal=!1,this._palettes=[],this.rovingTabindexController=new h.RovingTabindexController(this,{focusInIndex:e=>e.findIndex(t=>this.selected?!t.disabled&&t.value===this.selected:!t.disabled),elements:()=>this.palettes,isFocusableElement:e=>!e.disabled}),this.label="",this._onKeyDown=e=>{if(e.code==="Enter"||e.code==="Space"){e.preventDefault();const t=e.target;if(t.value===void 0)return;this.deselectSelectedPalettes(),t.selected=!0,t.tabIndex=0,t.setAttribute("aria-checked","true"),this.setSelected(t.value,!0)}},this.manageColorPalettes=()=>{if(!this.slotElement)return;const t=this.slotElement.assignedElements({flatten:!0}).reduce((s,a)=>{if(a.matches("luzmo-color-palette"))s.push(a);else{const l=[...a.querySelectorAll(":scope > luzmo-color-palette")];s.push(...l)}return s},[]);this.palettes=t,this.manageChildren(),this.manageSelects()},new u.s(this,{config:{childList:!0,subtree:!0},callback:()=>{this.manageColorPalettes()},skipInitial:!0})}static get styles(){return[r.r(m)]}set palettes(e){e!==this.palettes&&(this._palettes=e,this.rovingTabindexController.clearElementCache())}get palettes(){return this._palettes}get selected(){return this._selected}set selected(e){this.requestUpdate("selected",this._selected),this._selected=e,this.updateComplete.then(()=>{this.applySelects(),this.manageChildren()})}dispatchChange(e){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0,cancelable:!0}))||(this.setSelected(e),this.palettes.map(s=>{s.selected=!!(s.value&&this.selected===s.value)}))}setSelected(e,t){if(e===this.selected)return;const s=this.selected;this.requestUpdate("selected",s),this._selected=e,t&&this.dispatchChange(s)}focus(e){this.rovingTabindexController.focus(e)}deselectSelectedPalettes(){this.palettes.forEach(e=>{e.selected&&(e.selected=!1,e.tabIndex=-1,e.setAttribute("aria-checked","false"))})}_handleClick(e){const t=e.target;t.value!==void 0&&(this.deselectSelectedPalettes(),t.selected=!0,t.tabIndex=0,t.setAttribute("aria-checked","true"),this.setSelected(t.value,!0))}async applySelects(){await this.manageSelects()}async manageSelects(){if(this.palettes.length===0)return;const e=this.palettes;this.setAttribute("role","radiogroup");const t=[],s=e.map(async l=>{await l.updateComplete,l.setAttribute("role","radio"),l.setAttribute("aria-checked",l.selected?"true":"false"),l.selected&&t.push(l)});await Promise.all(s);const a=t.map(l=>l.value).find(Boolean);this.setSelected(a)}render(){return r.x`
|
|
19
|
+
<div
|
|
20
|
+
class="color-palette-group"
|
|
21
|
+
aria-label=${p.o(this.label??void 0)}
|
|
22
|
+
role="radiogroup"
|
|
23
|
+
@keydown=${this._onKeyDown}
|
|
24
|
+
@slotchange=${this.manageColorPalettes}
|
|
25
|
+
>
|
|
26
|
+
<slot role="presentation"></slot>
|
|
27
|
+
</div>
|
|
28
|
+
`}firstUpdated(e){super.firstUpdated(e),this.addEventListener("click",this._handleClick)}updated(e){super.updated(e),e.has("horizontal")&&this.palettes.forEach(s=>{s.horizontal=this.horizontal}),this.manageSelects(),this.manageChildren(),e.has("size")&&this.manageChildren(e),e.has("label")&&(this.label||e.get("label")!==void 0)&&(this.label.length>0?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"))}manageChildren(e){this.palettes.forEach(t=>{t.setAttribute("aria-label",`color palette: ${t.value}`),t.selected=!!(t.value&&this.selected===t.value),this.size&&(this.size!=="m"||(e==null?void 0:e.get("size"))!==void 0)&&(t.size=this.size),this.disabled&&(t.disabled=!0),t.horizontal=this.horizontal})}}o([r.n({type:Boolean,reflect:!0})],i.prototype,"disabled",2);o([r.n({type:Boolean,reflect:!0})],i.prototype,"horizontal",2);o([r.n({type:String})],i.prototype,"label",2);o([r.n({type:String})],i.prototype,"selected",1);o([d.e("slot")],i.prototype,"slotElement",2);customElements.get("luzmo-color-palette-group")||customElements.define("luzmo-color-palette-group",i);exports.LuzmoColorPaletteGroup=i;
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
/*! * Lucero - The design system for Luzmo.
|
|
2
|
+
*
|
|
3
|
+
* Copyright © 2025 Luzmo
|
|
4
|
+
* All rights reserved.
|
|
5
|
+
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
+
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
+
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
+
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
+
*
|
|
10
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
+
* SOFTWARE.
|
|
17
|
+
* */
|
|
18
|
+
import { a as d, r as m, x as p, n as u } from "../base-WsynuqaS.js";
|
|
19
|
+
import { s as h } from "../mutation-controller-DH7YOCyj.js";
|
|
20
|
+
import { e as z } from "../query-D_KR_GUc.js";
|
|
21
|
+
import { o as g } from "../if-defined-DOaE2coe.js";
|
|
22
|
+
import { R as f } from "../roving-tabindex-DOg4z6ZU.js";
|
|
23
|
+
import { S as b } from "../sized-mixin-D4ACoVUr.js";
|
|
24
|
+
const n = () => {
|
|
25
|
+
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
26
|
+
const s = document.createElement("style");
|
|
27
|
+
s.setAttribute("data-luzmo-vars", ""), s.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(s);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
n();
|
|
31
|
+
const v = ".color-palette-group{column-gap:var(--luzmo-color-palette-group-column-gap, var(--color-palette-group-column-gap));row-gap:var(--luzmo-color-palette-group-row-gap, var(--color-palette-group-row-gap));flex-wrap:wrap;display:flex}::slotted(*){flex-shrink:0}::slotted(:focus-visible){z-index:1}:host{--color-palette-group-column-gap: var(--luzmo-spacing-3);--color-palette-group-row-gap: var(--luzmo-spacing-3)}:host([size=s]){--color-palette-group-column-gap: var(--luzmo-spacing-2);--color-palette-group-row-gap: var(--luzmo-spacing-2)}:host,:host([size=l]),:host([size=xl]){--color-palette-group-column-gap: var(--luzmo-spacing-3);--color-palette-group-row-gap: var(--luzmo-spacing-3)}";
|
|
32
|
+
var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (s, e, o, l) => {
|
|
33
|
+
for (var r = l > 1 ? void 0 : l ? y(e, o) : e, t = s.length - 1, c; t >= 0; t--)
|
|
34
|
+
(c = s[t]) && (r = (l ? c(e, o, r) : c(r)) || r);
|
|
35
|
+
return l && r && x(e, o, r), r;
|
|
36
|
+
};
|
|
37
|
+
class a extends b(d, {
|
|
38
|
+
validSizes: ["s", "m", "l", "xl"],
|
|
39
|
+
noDefaultSize: !0
|
|
40
|
+
}) {
|
|
41
|
+
constructor() {
|
|
42
|
+
super(), this.disabled = !1, this.horizontal = !1, this._palettes = [], this.rovingTabindexController = new f(
|
|
43
|
+
this,
|
|
44
|
+
{
|
|
45
|
+
focusInIndex: (e) => e.findIndex(
|
|
46
|
+
(o) => this.selected ? !o.disabled && o.value === this.selected : !o.disabled
|
|
47
|
+
),
|
|
48
|
+
elements: () => this.palettes,
|
|
49
|
+
isFocusableElement: (e) => !e.disabled
|
|
50
|
+
}
|
|
51
|
+
), this.label = "", this._onKeyDown = (e) => {
|
|
52
|
+
if (e.code === "Enter" || e.code === "Space") {
|
|
53
|
+
e.preventDefault();
|
|
54
|
+
const o = e.target;
|
|
55
|
+
if (o.value === void 0)
|
|
56
|
+
return;
|
|
57
|
+
this.deselectSelectedPalettes(), o.selected = !0, o.tabIndex = 0, o.setAttribute("aria-checked", "true"), this.setSelected(o.value, !0);
|
|
58
|
+
}
|
|
59
|
+
}, this.manageColorPalettes = () => {
|
|
60
|
+
if (!this.slotElement)
|
|
61
|
+
return;
|
|
62
|
+
const o = this.slotElement.assignedElements({
|
|
63
|
+
flatten: !0
|
|
64
|
+
}).reduce((l, r) => {
|
|
65
|
+
if (r.matches("luzmo-color-palette"))
|
|
66
|
+
l.push(r);
|
|
67
|
+
else {
|
|
68
|
+
const t = [
|
|
69
|
+
...r.querySelectorAll(":scope > luzmo-color-palette")
|
|
70
|
+
];
|
|
71
|
+
l.push(...t);
|
|
72
|
+
}
|
|
73
|
+
return l;
|
|
74
|
+
}, []);
|
|
75
|
+
this.palettes = o, this.manageChildren(), this.manageSelects();
|
|
76
|
+
}, new h(this, {
|
|
77
|
+
config: {
|
|
78
|
+
childList: !0,
|
|
79
|
+
subtree: !0
|
|
80
|
+
},
|
|
81
|
+
callback: () => {
|
|
82
|
+
this.manageColorPalettes();
|
|
83
|
+
},
|
|
84
|
+
skipInitial: !0
|
|
85
|
+
});
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* The styles of the color palette
|
|
89
|
+
* @internal
|
|
90
|
+
*/
|
|
91
|
+
static get styles() {
|
|
92
|
+
return [m(v)];
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* The color palette elements in the group
|
|
96
|
+
* @internal
|
|
97
|
+
*/
|
|
98
|
+
set palettes(e) {
|
|
99
|
+
e !== this.palettes && (this._palettes = e, this.rovingTabindexController.clearElementCache());
|
|
100
|
+
}
|
|
101
|
+
/**
|
|
102
|
+
* The color palette elements in the group
|
|
103
|
+
* @internal
|
|
104
|
+
*/
|
|
105
|
+
get palettes() {
|
|
106
|
+
return this._palettes;
|
|
107
|
+
}
|
|
108
|
+
get selected() {
|
|
109
|
+
return this._selected;
|
|
110
|
+
}
|
|
111
|
+
set selected(e) {
|
|
112
|
+
this.requestUpdate("selected", this._selected), this._selected = e, this.updateComplete.then(() => {
|
|
113
|
+
this.applySelects(), this.manageChildren();
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
dispatchChange(e) {
|
|
117
|
+
this.dispatchEvent(
|
|
118
|
+
new Event("change", {
|
|
119
|
+
bubbles: !0,
|
|
120
|
+
composed: !0,
|
|
121
|
+
cancelable: !0
|
|
122
|
+
})
|
|
123
|
+
) || (this.setSelected(e), this.palettes.map((l) => {
|
|
124
|
+
l.selected = !!(l.value && this.selected === l.value);
|
|
125
|
+
}));
|
|
126
|
+
}
|
|
127
|
+
setSelected(e, o) {
|
|
128
|
+
if (e === this.selected)
|
|
129
|
+
return;
|
|
130
|
+
const l = this.selected;
|
|
131
|
+
this.requestUpdate("selected", l), this._selected = e, o && this.dispatchChange(l);
|
|
132
|
+
}
|
|
133
|
+
focus(e) {
|
|
134
|
+
this.rovingTabindexController.focus(e);
|
|
135
|
+
}
|
|
136
|
+
deselectSelectedPalettes() {
|
|
137
|
+
this.palettes.forEach((e) => {
|
|
138
|
+
e.selected && (e.selected = !1, e.tabIndex = -1, e.setAttribute("aria-checked", "false"));
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
_handleClick(e) {
|
|
142
|
+
const o = e.target;
|
|
143
|
+
o.value !== void 0 && (this.deselectSelectedPalettes(), o.selected = !0, o.tabIndex = 0, o.setAttribute("aria-checked", "true"), this.setSelected(o.value, !0));
|
|
144
|
+
}
|
|
145
|
+
async applySelects() {
|
|
146
|
+
await this.manageSelects();
|
|
147
|
+
}
|
|
148
|
+
async manageSelects() {
|
|
149
|
+
if (this.palettes.length === 0)
|
|
150
|
+
return;
|
|
151
|
+
const e = this.palettes;
|
|
152
|
+
this.setAttribute("role", "radiogroup");
|
|
153
|
+
const o = [], l = e.map(async (t) => {
|
|
154
|
+
await t.updateComplete, t.setAttribute("role", "radio"), t.setAttribute("aria-checked", t.selected ? "true" : "false"), t.selected && o.push(t);
|
|
155
|
+
});
|
|
156
|
+
await Promise.all(l);
|
|
157
|
+
const r = o.map((t) => t.value).find(Boolean);
|
|
158
|
+
this.setSelected(r);
|
|
159
|
+
}
|
|
160
|
+
render() {
|
|
161
|
+
return p`
|
|
162
|
+
<div
|
|
163
|
+
class="color-palette-group"
|
|
164
|
+
aria-label=${g(this.label ?? void 0)}
|
|
165
|
+
role="radiogroup"
|
|
166
|
+
@keydown=${this._onKeyDown}
|
|
167
|
+
@slotchange=${this.manageColorPalettes}
|
|
168
|
+
>
|
|
169
|
+
<slot role="presentation"></slot>
|
|
170
|
+
</div>
|
|
171
|
+
`;
|
|
172
|
+
}
|
|
173
|
+
firstUpdated(e) {
|
|
174
|
+
super.firstUpdated(e), this.addEventListener("click", this._handleClick);
|
|
175
|
+
}
|
|
176
|
+
updated(e) {
|
|
177
|
+
super.updated(e), e.has("horizontal") && this.palettes.forEach((l) => {
|
|
178
|
+
l.horizontal = this.horizontal;
|
|
179
|
+
}), this.manageSelects(), this.manageChildren(), e.has("size") && this.manageChildren(e), e.has("label") && (this.label || e.get("label") !== void 0) && (this.label.length > 0 ? this.setAttribute("aria-label", this.label) : this.removeAttribute("aria-label"));
|
|
180
|
+
}
|
|
181
|
+
manageChildren(e) {
|
|
182
|
+
this.palettes.forEach((o) => {
|
|
183
|
+
o.setAttribute("aria-label", `color palette: ${o.value}`), o.selected = !!(o.value && this.selected === o.value), this.size && (this.size !== "m" || (e == null ? void 0 : e.get("size")) !== void 0) && (o.size = this.size), this.disabled && (o.disabled = !0), o.horizontal = this.horizontal;
|
|
184
|
+
});
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
i([
|
|
188
|
+
u({ type: Boolean, reflect: !0 })
|
|
189
|
+
], a.prototype, "disabled", 2);
|
|
190
|
+
i([
|
|
191
|
+
u({ type: Boolean, reflect: !0 })
|
|
192
|
+
], a.prototype, "horizontal", 2);
|
|
193
|
+
i([
|
|
194
|
+
u({ type: String })
|
|
195
|
+
], a.prototype, "label", 2);
|
|
196
|
+
i([
|
|
197
|
+
u({ type: String })
|
|
198
|
+
], a.prototype, "selected", 1);
|
|
199
|
+
i([
|
|
200
|
+
z("slot")
|
|
201
|
+
], a.prototype, "slotElement", 2);
|
|
202
|
+
customElements.get("luzmo-color-palette-group") || customElements.define("luzmo-color-palette-group", a);
|
|
203
|
+
export {
|
|
204
|
+
a as LuzmoColorPaletteGroup
|
|
205
|
+
};
|
package/components/index.cjs
CHANGED
|
@@ -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 l=require("./accordion/index.cjs"),d=require("./action-bar/index.cjs"),q=require("./action-button/index.cjs");require("./action-group/index.cjs");const p=require("./action-menu/index.cjs"),x=require("./avatar/index.cjs"),_=require("./button/index.cjs"),S=require("./button-group/index.cjs"),C=require("./index-BLWuwZXx.cjs"),T=require("./checkbox/index.cjs"),b=require("./color-area/index.cjs"),v=require("./color-field/index.cjs"),I=require("./color-handle/index.cjs");require("./color-loupe/index.cjs");const g=require("./color-menu/index.cjs"),A=require("./color-palette/index.cjs"),P=require("./color-
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./accordion/index.cjs"),d=require("./action-bar/index.cjs"),q=require("./action-button/index.cjs");require("./action-group/index.cjs");const p=require("./action-menu/index.cjs"),x=require("./avatar/index.cjs"),_=require("./button/index.cjs"),S=require("./button-group/index.cjs"),C=require("./index-BLWuwZXx.cjs"),T=require("./checkbox/index.cjs"),b=require("./color-area/index.cjs"),v=require("./color-field/index.cjs"),I=require("./color-handle/index.cjs");require("./color-loupe/index.cjs");const g=require("./color-menu/index.cjs"),A=require("./color-palette/index.cjs"),P=require("./color-palette-group/index.cjs"),O=require("./color-picker/index.cjs"),M=require("./index-BwxgAdzi.cjs"),F=require("./date-time-picker/index.cjs"),y=require("./divider/index.cjs");require("./field-group/index.cjs");require("./field-label/index.cjs");const R=require("./icon/index.cjs"),B=require("./infield-button/index.cjs"),G=require("./label/index.cjs"),i=require("./menu/index.cjs"),k=require("./multi-language-field/index.cjs"),h=require("./number-field/index.cjs"),u=require("./options/index.cjs"),r=require("./overlay/index.cjs");require("./picker/index.cjs");const D=require("./picker-button/index.cjs");require("./popover/index.cjs");require("./progress-circle/index.cjs");const m=require("./radio/index.cjs"),E=require("./search/index.cjs"),f=require("./select/index.cjs"),N=require("./slider/index.cjs"),c=require("./swatch/index.cjs"),U=require("./switch/index.cjs"),t=require("./tabs/index.cjs"),L=require("./tags/index.cjs"),w=require("./text-field/index.cjs"),H=require("./toast/index.cjs"),V=require("./tooltip/index.cjs"),K=require("./unit-input/index.cjs"),s=require("./base-CBCg3yyw.cjs"),W=require("./focus-visible-B0P9aY_G.cjs"),Z=require("./focusable-EbipgXRh.cjs"),o=require("./platform-BiXhwqk3.cjs"),a=require("./sized-mixin-CPxE5C96.cjs"),j=require("./streaming-listener-B00MvALi.cjs"),J=require("./action-group-DJGMcRHb.cjs"),Q=require("./clear-button-Qi1pMA5S.cjs"),X=require("./close-button-BFMBEw3q.cjs"),Y=require("./color-loupe-CaA_Lfkk.cjs"),$=require("./field-group-DkGst3r5.cjs"),ee=require("./field-label-mO1AkUgR.cjs"),e=require("./overlay-KSKMzzkh.cjs"),z=require("./slottable-request-event-BfUUt1Mh.cjs"),n=require("./picker-DWsBWdPN.cjs"),oe=require("./popover-KFfO0IYL.cjs"),re=require("./progress-circle-BvRJNuNo.cjs"),ie=require("./text-field-D5d_Gt0t.cjs");exports.LuzmoAccordion=l.LuzmoAccordion;exports.LuzmoAccordionItem=l.LuzmoAccordionItem;exports.LuzmoActionBar=d.LuzmoActionBar;exports.LuzmoActionButton=q.LuzmoActionButton;exports.LuzmoActionMenu=p.LuzmoActionMenu;exports.LuzmoAvatar=x.LuzmoAvatar;exports.LuzmoButton=_.LuzmoButton;exports.LuzmoButtonGroup=S.LuzmoButtonGroup;exports.LuzmoCalendar=C.LuzmoCalendar;exports.LuzmoCheckbox=T.LuzmoCheckbox;exports.LuzmoColorArea=b.LuzmoColorArea;exports.LuzmoColorField=v.LuzmoColorField;exports.LuzmoColorHandle=I.LuzmoColorHandle;exports.LuzmoColorMenu=g.LuzmoColorMenu;exports.LuzmoColorPalette=A.LuzmoColorPalette;exports.LuzmoColorPaletteGroup=P.LuzmoColorPaletteGroup;exports.LuzmoColorPicker=O.LuzmoColorPicker;exports.LuzmoColorSlider=M.LuzmoColorSlider;exports.LuzmoDateTimePicker=F.LuzmoDateTimePicker;exports.LuzmoDivider=y.LuzmoDivider;exports.LuzmoIcon=R.LuzmoIcon;exports.LuzmoInfieldButton=B.LuzmoInfieldButton;exports.LuzmoLabel=G.LuzmoLabel;exports.LuzmoMenu=i.LuzmoMenu;exports.LuzmoMenuDivider=i.LuzmoMenuDivider;exports.LuzmoMenuGroup=i.LuzmoMenuGroup;exports.LuzmoMenuItem=i.LuzmoMenuItem;exports.MenuItemAddedOrUpdatedEvent=i.MenuItemAddedOrUpdatedEvent;exports.LuzmoMultiLangField=k.LuzmoMultiLangField;exports.LuzmoNumberField=h.LuzmoNumberField;exports.LuzmoOption=u.LuzmoOption;exports.LuzmoOptions=u.LuzmoOptions;exports.LuzmoOptionsDivider=u.LuzmoOptionsDivider;exports.VIRTUALIZE_AS_OF_NUM_ITEMS=u.VIRTUALIZE_AS_OF_NUM_ITEMS;exports.LuzmoOverlayTrigger=r.LuzmoOverlayTrigger;exports.OverlayTriggerDirective=r.OverlayTriggerDirective;exports.SlottableRequestDirective=r.SlottableRequestDirective;exports.openOverlay=r.openOverlay;exports.slottableRequest=r.slottableRequest;exports.trigger=r.trigger;exports.LuzmoPickerButton=D.LuzmoPickerButton;exports.LuzmoRadio=m.LuzmoRadio;exports.LuzmoRadioGroup=m.LuzmoRadioGroup;exports.LuzmoSearch=E.LuzmoSearch;exports.LuzmoSelect=f.LuzmoSelect;exports.LuzmoSlider=N.LuzmoSlider;exports.LuzmoSwatch=c.LuzmoSwatch;exports.LuzmoSwatchGroup=c.LuzmoSwatchGroup;exports.LuzmoSwitch=U.LuzmoSwitch;exports.LuzmoTab=t.LuzmoTab;exports.LuzmoTabPanel=t.LuzmoTabPanel;exports.LuzmoTabs=t.LuzmoTabs;exports.LuzmoTabsOverflow=t.LuzmoTabsOverflow;exports.LuzmoTag=L.LuzmoTag;exports.LuzmoTags=L.LuzmoTags;exports.LuzmoHelpText=w.LuzmoHelpText;exports.LuzmoToast=H.LuzmoToast;exports.LuzmoTooltip=V.LuzmoTooltip;exports.LuzmoUnitInput=K.LuzmoUnitInput;exports.LuzmoElement=s.LuzmoElement;exports.LuzmoMixin=s.LuzmoMixin;exports.FocusVisiblePolyfillMixin=W.FocusVisiblePolyfillMixin;exports.Focusable=Z.Focusable;exports.isAndroid=o.isAndroid;exports.isAppleDevice=o.isAppleDevice;exports.isChrome=o.isChrome;exports.isFirefox=o.isFirefox;exports.isIOS=o.isIOS;exports.isIPad=o.isIPad;exports.isIPhone=o.isIPhone;exports.isMac=o.isMac;exports.isSeamonkey=o.isSeamonkey;exports.isWebKit=o.isWebKit;exports.ElementSizes=a.ElementSizes;exports.SizedMixin=a.SizedMixin;exports.streamingListener=j.streamingListener;exports.LuzmoActionGroup=J.LuzmoActionGroup;exports.LuzmoClearButton=Q.LuzmoClearButton;exports.LuzmoCloseButton=X.LuzmoCloseButton;exports.LuzmoColorLoupe=Y.LuzmoColorLoupe;exports.LuzmoFieldGroup=$.LuzmoFieldGroup;exports.LuzmoFieldLabel=ee.LuzmoFieldLabel;exports.ClickController=e.ClickController;exports.HoverController=e.HoverController;exports.InteractionController=e.InteractionController;exports.InteractionTypes=e.InteractionTypes;exports.LONGPRESS_INSTRUCTIONS=e.LONGPRESS_INSTRUCTIONS;exports.LongpressController=e.LongpressController;exports.LuzmoAbstractOverlay=e.LuzmoAbstractOverlay;exports.LuzmoOverlay=e.LuzmoOverlay;exports.PlacementController=e.PlacementController;exports.SAFARI_FOCUS_RING_CLASS=e.SAFARI_FOCUS_RING_CLASS;exports.VirtualTrigger=e.VirtualTrigger;exports.guaranteedAllTransitionend=e.guaranteedAllTransitionend;exports.lastInteractionType=e.lastInteractionType;exports.nextFrame=e.nextFrame;exports.noop=e.noop;exports.overlayTimer=e.overlayTimer;exports.placementUpdatedSymbol=e.placementUpdatedSymbol;exports.SlottableRequestEvent=z.SlottableRequestEvent;exports.removeSlottableRequest=z.removeSlottableRequest;exports.DESCRIPTION_ID=n.DESCRIPTION_ID;exports.LuzmoPicker=n.LuzmoPicker;exports.LuzmoPickerBase=n.LuzmoPickerBase;exports.LuzmoPopover=oe.LuzmoPopover;exports.LuzmoProgressCircle=re.LuzmoProgressCircle;exports.LuzmoTextField=ie.LuzmoTextField;
|