@orangelogic/design-system 4.6.0 → 4.7.0
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/library/chunks/{color-swatch-group.Dt2vLFCn.js → color-swatch-group.DMza5xD7.js} +8 -7
- package/library/chunks/{index.l7_9Gos7.js → index.DpHjvpmp.js} +2 -2
- package/library/chunks/{tab-group.JWpZbQVm.js → tab-group.Dy2fEfC-.js} +9 -4
- package/library/chunks/{types.Cvu2P3Ny.js → types.4OaADvOF.js} +12094 -12036
- package/library/components/atoms.js +1 -1
- package/library/components/color-picker.js +1 -1
- package/library/components/color-swatch-group.js +1 -1
- package/library/components/color-swatch.js +8 -8
- package/library/components/file-on-demand.js +1 -1
- package/library/components/organisms.js +1 -1
- package/library/components/tab-group.js +1 -1
- package/library/components/types.js +27 -27
- package/library/package.json +1 -1
- package/library/packages/atoms/src/components/tab-group/tab-group.d.ts +1 -0
- package/library/packages/molecules/src/icon-picker/icon-picker.d.ts +15 -3
- package/library/packages/organisms/src/content-builder/components/color-swatch-picker/color-swatch-picker.d.ts +7 -4
- package/library/react-web-component.d.ts +4 -0
- package/package.json +1 -1
|
@@ -23380,7 +23380,7 @@ function Mf(r) {
|
|
|
23380
23380
|
function go(r) {
|
|
23381
23381
|
return `custom-${r}`;
|
|
23382
23382
|
}
|
|
23383
|
-
const Tf = Q`:host{--grid-gap:var(--cx-spacing-medium);--grid-column-gap:var(--grid-gap);--grid-row-gap:var(--grid-gap);--padding:0;--palette-title-font-size:var(--cx-font-size-x-large);--palette-title-color:light-dark(#000,#fff);--column-title-font-size:var(--cx-font-size-large);--column-title-color:light-dark(#000,#fff);--name-swatch-width:64px;--name-swatch-height:32px;--name-swatch-border-radius:0;--swatch-circle-size:350px;--swatch-circle-border-radius:1000px;--swatch-circle-content-align:center;--swatch-circle-content-justify:center;--swatch-circle-content-margin:0px;--swatch-group-horizontal-gap:-120px;--swatch-border:light-dark(#0000,#0000) 0px;--swatch-border-radius:var(--cx-border-radius-x-large);--swatch-box-shadow:0px 0px 0px 0px light-dark(#0000,#0000);--swatch-content-justify:space-between;--swatch-content-margin:var(--cx-spacing-medium);--swatch-min-height:50px;--swatch-text-color:light-dark(#000,#fff);--swatch-font-size:var(--cx-font-size-large);padding:var(--cx-focus-ring-width);width:100%;min-width:0;display:block}.color-swatch-group__swatches{padding:var(--padding,0);width:100%;max-width:100%;height:100%}.color-swatch-group__table-container{max-width:100%}.color-swatch-group__measure{visibility:hidden;pointer-events:none;box-sizing:border-box;white-space:nowrap;padding-right:calc(var(--row-padding-right,var(--cx-spacing-2x-small)) + var(--table-column-gap,0px));padding-left:var(--row-padding-left,var(--cx-spacing-2x-small));font-family:var(--swatch-font-family,var(--cx-font-sans));font-style:var(--swatch-font-style,normal);font-weight:var(--swatch-font-weight,var(--cx-font-weight-regular));font-size:var(--swatch-font-size,var(--cx-font-size-large));position:absolute;top:0;left:0}.color-swatch-group__measure--title{padding-right:calc(var(--row-padding-left,var(--cx-spacing-2x-small)) + var(--table-column-gap,0px));font-family:var(--column-title-font-family,var(--swatch-font-family,var(--cx-font-sans)));font-style:var(--column-title-font-style,var(--swatch-font-style,normal));font-weight:var(--column-title-font-weight,var(--swatch-font-weight,var(--cx-font-weight-semibold)));font-size:var(--column-title-font-size,var(--swatch-font-size,var(--cx-font-size-large)))}.color-swatch-group__measure--copyable{border:var(--cx-input-border-width) solid transparent;text-transform:var(--cx-button-text-transform,none)}.color-swatch-group__measure--name{padding-left:calc(var(--row-padding-left,var(--cx-spacing-2x-small)) + var(--name-swatch-width,64px) + var(--cx-spacing-medium))}.color-swatch-group__title{--font-family:var(--palette-title-font-family,var(--swatch-font-family,var(--cx-font-sans)));--font-style:var(--palette-title-font-style);--font-weight:var(--palette-title-font-weight);--font-size:var(--palette-title-font-size);--color:var(--palette-title-color)}.color-swatch-group__table-container:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-swatch-group__swatches--circles--horizontal,.color-swatch-group__swatches--circles--vertical{--spacing-container-gap:0px}.color-swatch-group__swatches--circles--horizontal>cx-color-swatch:not(:first-child){margin-left:var(--swatch-group-horizontal-gap,-120px)}.color-swatch-group__swatches--circles--vertical>cx-color-swatch:not(:first-child){margin-top:var(--swatch-group-vertical-gap,-50px)}.color-swatch-group__swatches--circles--vertical__item--mobile{--swatch-size:100%}.color-swatch-group__swatches--grid{align-items:stretch;column-gap:var(--grid-column-gap,var(--grid-gap,var(--cx-spacing-medium)));row-gap:var(--grid-row-gap,var(--grid-gap,var(--cx-spacing-medium)));display:grid}.color-swatch-group__table{font-family:var(--swatch-font-family,var(--cx-font-sans));font-style:var(--swatch-font-style,normal);--width:var(--table-width,100%);--body-background-color:transparent;--row-background-color:transparent;--row-even-background-color:transparent;--row-hover-background-color:var(--cx-color-neutral-50);--row-even-hover-background-color:var(--cx-color-neutral-50);--header-background-color:transparent;--group-row-background-color:transparent;--cell-border-color:transparent;--cell-bottom-border-color:transparent;--header-font-family:var(--column-title-font-family,var(--swatch-font-family,var(--cx-font-sans)));--header-font-style:var(--column-title-font-style,var(--swatch-font-style,normal));--header-font-size:var(--column-title-font-size,var(--swatch-font-size,var(--cx-font-size-large)));--header-font-weight:var(--column-title-font-weight,var(--swatch-font-weight,var(--cx-font-weight-semibold)));--header-color:var(--column-title-color,var(--cx-color-neutral-700));--header-border-right:none;--cell-font-family:var(--swatch-font-family,var(--cx-font-sans));--cell-font-size:var(--swatch-font-size,var(--cx-font-size-large));--cell-font-weight:var(--swatch-font-weight,var(--cx-font-weight-regular));--cell-line-height:normal;--cell-hover-background-color:transparent;--color:var(--swatch-text-color,var(--cx-color-neutral-900));--placeholder-font-size:var(--cx-font-size-medium-large);--cell-horizontal-padding:var(--cx-spacing-2x-small);--cell-padding-top:var(--row-padding-top,var(--cx-spacing-2x-small));--cell-padding-right:var(--row-padding-right,var(--cx-spacing-2x-small));--cell-padding-bottom:var(--row-padding-bottom,var(--cx-spacing-2x-small));--cell-padding-left:var(--row-padding-left,var(--cx-spacing-2x-small));--header-horizontal-padding:var(--row-padding-left,var(--cx-spacing-2x-small));--row-gap:var(--table-row-gap,0);--column-gap:var(--table-column-gap,0px);--header-border-bottom:1px solid var(--cx-color-neutral-200);--hover-menu-background-color:var(--row-hover-background-color);--outer-border-color:transparent}.color-swatch-group__table--no-separator{--header-border-bottom:none}.color-swatch-group__table::part(table){background-color:#0000}`;
|
|
23383
|
+
const Tf = Q`:host{--grid-gap:var(--cx-spacing-medium);--grid-column-gap:var(--grid-gap);--grid-row-gap:var(--grid-gap);--padding:0;--palette-title-font-size:var(--cx-font-size-x-large);--palette-title-color:light-dark(#000,#fff);--column-title-font-size:var(--cx-font-size-large);--column-title-color:light-dark(#000,#fff);--name-swatch-width:64px;--name-swatch-height:32px;--name-swatch-border-radius:0;--swatch-circle-size:350px;--swatch-circle-border-radius:1000px;--swatch-circle-content-align:center;--swatch-circle-content-justify:center;--swatch-circle-content-margin:0px;--swatch-group-horizontal-gap:-120px;--swatch-border:light-dark(#0000,#0000) 0px;--swatch-border-radius:var(--cx-border-radius-x-large);--swatch-box-shadow:0px 0px 0px 0px light-dark(#0000,#0000);--swatch-content-justify:space-between;--swatch-content-margin:var(--cx-spacing-medium);--swatch-min-height:50px;--swatch-text-color:light-dark(#000,#fff);--swatch-font-size:var(--cx-font-size-large);padding:var(--cx-focus-ring-width);width:100%;min-width:0;display:block}.color-swatch-group__swatches{padding:var(--padding,0);width:100%;max-width:100%;height:100%}.color-swatch-group__table-container{max-width:100%}.color-swatch-group__measure{visibility:hidden;pointer-events:none;box-sizing:border-box;white-space:nowrap;padding-right:calc(var(--row-padding-right,var(--cx-spacing-2x-small)) + var(--table-column-gap,0px));padding-left:var(--row-padding-left,var(--cx-spacing-2x-small));font-family:var(--swatch-font-family,var(--cx-font-sans));font-style:var(--swatch-font-style,normal);font-weight:var(--swatch-font-weight,var(--cx-font-weight-regular));font-size:var(--swatch-font-size,var(--cx-font-size-large));position:absolute;top:0;left:0}.color-swatch-group__measure--title{padding-right:calc(var(--row-padding-left,var(--cx-spacing-2x-small)) + var(--table-column-gap,0px));font-family:var(--column-title-font-family,var(--swatch-font-family,var(--cx-font-sans)));font-style:var(--column-title-font-style,var(--swatch-font-style,normal));font-weight:var(--column-title-font-weight,var(--swatch-font-weight,var(--cx-font-weight-semibold)));font-size:var(--column-title-font-size,var(--swatch-font-size,var(--cx-font-size-large)))}.color-swatch-group__measure--copyable{border:var(--cx-input-border-width) solid transparent;text-transform:var(--cx-button-text-transform,none)}.color-swatch-group__measure--name{padding-left:calc(var(--row-padding-left,var(--cx-spacing-2x-small)) + var(--name-swatch-width,64px) + var(--cx-spacing-medium))}.color-swatch-group__title{--font-family:var(--palette-title-font-family,var(--swatch-font-family,var(--cx-font-sans)));--font-style:var(--palette-title-font-style);--font-weight:var(--palette-title-font-weight);--font-size:var(--palette-title-font-size);--color:var(--palette-title-color)}.color-swatch-group__table-container:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-swatch-group__swatches--circles--horizontal,.color-swatch-group__swatches--circles--vertical{--spacing-container-gap:0px}.color-swatch-group__swatches--circles--horizontal{overflow:auto}.color-swatch-group__swatches--circles--horizontal>cx-color-swatch:not(:first-child){margin-left:var(--swatch-group-horizontal-gap,-120px)}.color-swatch-group__swatches--circles--vertical>cx-color-swatch:not(:first-child){margin-top:var(--swatch-group-vertical-gap,-50px)}.color-swatch-group__swatches--circles--vertical__item--mobile{--swatch-size:100%}.color-swatch-group__swatches--grid{align-items:stretch;column-gap:var(--grid-column-gap,var(--grid-gap,var(--cx-spacing-medium)));row-gap:var(--grid-row-gap,var(--grid-gap,var(--cx-spacing-medium)));display:grid}.color-swatch-group__table{font-family:var(--swatch-font-family,var(--cx-font-sans));font-style:var(--swatch-font-style,normal);--width:var(--table-width,100%);--body-background-color:transparent;--row-background-color:transparent;--row-even-background-color:transparent;--row-hover-background-color:var(--cx-color-neutral-50);--row-even-hover-background-color:var(--cx-color-neutral-50);--header-background-color:transparent;--group-row-background-color:transparent;--cell-border-color:transparent;--cell-bottom-border-color:transparent;--header-font-family:var(--column-title-font-family,var(--swatch-font-family,var(--cx-font-sans)));--header-font-style:var(--column-title-font-style,var(--swatch-font-style,normal));--header-font-size:var(--column-title-font-size,var(--swatch-font-size,var(--cx-font-size-large)));--header-font-weight:var(--column-title-font-weight,var(--swatch-font-weight,var(--cx-font-weight-semibold)));--header-color:var(--column-title-color,var(--cx-color-neutral-700));--header-border-right:none;--cell-font-family:var(--swatch-font-family,var(--cx-font-sans));--cell-font-size:var(--swatch-font-size,var(--cx-font-size-large));--cell-font-weight:var(--swatch-font-weight,var(--cx-font-weight-regular));--cell-line-height:normal;--cell-hover-background-color:transparent;--color:var(--swatch-text-color,var(--cx-color-neutral-900));--placeholder-font-size:var(--cx-font-size-medium-large);--cell-horizontal-padding:var(--cx-spacing-2x-small);--cell-padding-top:var(--row-padding-top,var(--cx-spacing-2x-small));--cell-padding-right:var(--row-padding-right,var(--cx-spacing-2x-small));--cell-padding-bottom:var(--row-padding-bottom,var(--cx-spacing-2x-small));--cell-padding-left:var(--row-padding-left,var(--cx-spacing-2x-small));--header-horizontal-padding:var(--row-padding-left,var(--cx-spacing-2x-small));--row-gap:var(--table-row-gap,0);--column-gap:var(--table-column-gap,0px);--header-border-bottom:1px solid var(--cx-color-neutral-200);--hover-menu-background-color:var(--row-hover-background-color);--outer-border-color:transparent}.color-swatch-group__table--no-separator{--header-border-bottom:none}.color-swatch-group__table::part(table){background-color:#0000}`;
|
|
23384
23384
|
var Ff = Object.defineProperty, Lf = Object.getOwnPropertyDescriptor, j = (r, e, t, i) => {
|
|
23385
23385
|
for (var s = i > 1 ? void 0 : i ? Lf(e, t) : e, o = r.length - 1, n; o >= 0; o--)
|
|
23386
23386
|
(n = r[o]) && (s = (i ? n(e, t, s) : n(s)) || s);
|
|
@@ -23928,12 +23928,13 @@ export {
|
|
|
23928
23928
|
jt as H,
|
|
23929
23929
|
Ct as a,
|
|
23930
23930
|
xf as b,
|
|
23931
|
-
|
|
23931
|
+
go as c,
|
|
23932
23932
|
er as d,
|
|
23933
|
-
|
|
23934
|
-
|
|
23935
|
-
|
|
23936
|
-
|
|
23937
|
-
|
|
23933
|
+
Ve as e,
|
|
23934
|
+
kt as f,
|
|
23935
|
+
Qt as g,
|
|
23936
|
+
Ef as h,
|
|
23937
|
+
ae as i,
|
|
23938
|
+
le as j,
|
|
23938
23939
|
tr as o
|
|
23939
23940
|
};
|
|
@@ -13,7 +13,7 @@ import { b as W } from "./_baseIteratee.sC2wLi2m.js";
|
|
|
13
13
|
import { a as J } from "./toString.B1zKIiZc.js";
|
|
14
14
|
import { b as X } from "./cloneDeep.tKGbEwzn.js";
|
|
15
15
|
import { c as Y } from "./_baseClone.ipmFlCAx.js";
|
|
16
|
-
import { F as _, a as Q, C as Z, I as tt, t as et, c as ot, b as st, d as rt, e as it, f as at, g as nt, h as lt, i as ct, j as pt, k as ht, l as dt, m as ut, n as mt, o as ft, p as gt, q as bt, r as yt, s as xt, O as Ct } from "./types.
|
|
16
|
+
import { F as _, a as Q, C as Z, I as tt, t as et, c as ot, b as st, d as rt, e as it, f as at, g as nt, h as lt, i as ct, j as pt, k as ht, l as dt, m as ut, n as mt, o as ft, p as gt, q as bt, r as yt, s as xt, O as Ct } from "./types.4OaADvOF.js";
|
|
17
17
|
import { C as wt } from "./button.CUeXJXcO.js";
|
|
18
18
|
import vt from "../components/button-group.js";
|
|
19
19
|
import kt from "../components/card.js";
|
|
@@ -36,7 +36,7 @@ import Nt from "../components/select.js";
|
|
|
36
36
|
import Ot from "../components/space.js";
|
|
37
37
|
import Mt from "../components/switch.js";
|
|
38
38
|
import Vt from "../components/tab.js";
|
|
39
|
-
import { C as jt } from "./tab-group.
|
|
39
|
+
import { C as jt } from "./tab-group.Dy2fEfC-.js";
|
|
40
40
|
import Gt from "../components/tab-panel.js";
|
|
41
41
|
import Wt from "../components/textarea.js";
|
|
42
42
|
import Kt from "../components/tooltip.js";
|
|
@@ -2337,7 +2337,10 @@ let S = class extends Bn {
|
|
|
2337
2337
|
customElements.whenDefined("cx-tab-panel")
|
|
2338
2338
|
]);
|
|
2339
2339
|
super.connectedCallback(), this.resizeObserver = new ResizeObserver(() => {
|
|
2340
|
-
this.repositionIndicator(), this.updateScrollControls(), this.updatePagination()
|
|
2340
|
+
if (this.repositionIndicator(), this.updateScrollControls(), this.updatePagination(), this.allowDropdownOverflow) {
|
|
2341
|
+
const t = Number.parseFloat(getComputedStyle(this.tabButtons).columnGap || "0") || 0;
|
|
2342
|
+
t !== this.lastTabGap && (this.lastTabGap = t, this.syncTabsAndPanels());
|
|
2343
|
+
}
|
|
2341
2344
|
}), this.mutationObserver = new MutationObserver((t) => {
|
|
2342
2345
|
t.some(
|
|
2343
2346
|
(e) => !["aria-labelledby", "aria-controls"].includes(e.attributeName)
|
|
@@ -2347,7 +2350,7 @@ let S = class extends Bn {
|
|
|
2347
2350
|
attributes: !0,
|
|
2348
2351
|
childList: !0,
|
|
2349
2352
|
subtree: !0
|
|
2350
|
-
}), this.resizeObserver.observe(this.nav), this.hidePanelVariant === Ut.Absolute && (this.setupPanelResizeObserver(), this.calculateTabPanelHeight()), o.then(() => {
|
|
2353
|
+
}), this.resizeObserver.observe(this.nav), this.resizeObserver.observe(this.tabButtons), this.hidePanelVariant === Ut.Absolute && (this.setupPanelResizeObserver(), this.calculateTabPanelHeight()), o.then(() => {
|
|
2351
2354
|
new IntersectionObserver(
|
|
2352
2355
|
(e, i) => {
|
|
2353
2356
|
e[0].intersectionRatio > 0 && (this.setAriaLabels(), this.setActiveTab(this.getActiveTab() ?? this.tabs[0], {
|
|
@@ -2359,7 +2362,7 @@ let S = class extends Bn {
|
|
|
2359
2362
|
});
|
|
2360
2363
|
}
|
|
2361
2364
|
disconnectedCallback() {
|
|
2362
|
-
super.disconnectedCallback(), this.mutationObserver?.disconnect(), this.overflowObserver?.disconnect(), this.cleanupPanelResizeObserver(), this.
|
|
2365
|
+
super.disconnectedCallback(), this.mutationObserver?.disconnect(), this.overflowObserver?.disconnect(), this.cleanupPanelResizeObserver(), this.resizeObserver?.disconnect();
|
|
2363
2366
|
}
|
|
2364
2367
|
/**
|
|
2365
2368
|
* Navigate to the next tab
|
|
@@ -2599,7 +2602,9 @@ let S = class extends Bn {
|
|
|
2599
2602
|
const o = new IntersectionObserver(
|
|
2600
2603
|
(t) => {
|
|
2601
2604
|
o.disconnect();
|
|
2602
|
-
const e = getComputedStyle(this.tabButtons), i = parseFloat(e.paddingLeft || "0") + parseFloat(e.paddingRight || "0"), r = Number.parseFloat(e.columnGap || "0") || 0
|
|
2605
|
+
const e = getComputedStyle(this.tabButtons), i = parseFloat(e.paddingLeft || "0") + parseFloat(e.paddingRight || "0"), r = Number.parseFloat(e.columnGap || "0") || 0;
|
|
2606
|
+
this.lastTabGap = r;
|
|
2607
|
+
const n = this.container.clientWidth - i, s = this.dropdownTrigger?.clientWidth ?? 0, a = t.length;
|
|
2603
2608
|
this.dropdownOffset = 0, this.isActiveTabHidden = !1, this.shouldShowDropdown = !1, this.tabs.forEach((l) => {
|
|
2604
2609
|
l.style.setProperty("--tab-max-width", "unset"), l.offsetWidth;
|
|
2605
2610
|
});
|