udp-stencil-component-library 26.6.0-beta.0 → 26.6.0-beta.2
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/dist/cjs/ag-grid-base_65.cjs.entry.js +10 -3
- package/dist/collection/components/fluent-ui/empty-state/udp-empty-state.css +39 -0
- package/dist/collection/components/fluent-ui/empty-state/udp-empty-state.js +10 -3
- package/dist/components/udp-empty-state2.js +1 -1
- package/dist/docs.json +2 -2
- package/dist/esm/ag-grid-base_65.entry.js +10 -3
- package/dist/stencil-library/ag-grid-base_65.entry.js +1 -1
- package/dist/types/components/fluent-ui/empty-state/udp-empty-state.d.ts +1 -1
- package/dist/types/components.d.ts +2 -2
- package/package.json +1 -1
|
@@ -6638,13 +6638,19 @@ const UdpDialog = class {
|
|
|
6638
6638
|
};
|
|
6639
6639
|
UdpDialog.style = udpDialogCss();
|
|
6640
6640
|
|
|
6641
|
-
const udpEmptyStateCss = () => `:host{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingVerticalS);text-align:center;width:100%;height:100%;padding:var(--spacingVerticalL) var(--spacingHorizontalL);box-sizing:border-box;color:var(--colorNeutralForeground1)}:host(.size-small){--empty-state-icon-size:32px;--empty-state-spinner-scale:1;}:host(.size-medium){--empty-state-icon-size:48px;--empty-state-spinner-scale:1.2;}:host(.size-large){--empty-state-icon-size:64px;--empty-state-spinner-scale:1.455;}.empty-state-icon{display:flex;align-items:center;justify-content:center;width:var(--empty-state-icon-size, 48px);height:var(--empty-state-icon-size, 48px);--udp-icon-size:var(--empty-state-icon-size, 48px)}.icon-slot{display:flex;align-items:center;justify-content:center;width:100%;height:100%}udp-spinner{transform:scale(var(--empty-state-spinner-scale, 1))}.empty-state-primary,.empty-state-secondary{display:flex;flex-direction:column;align-items:center;max-width:var(--empty-state-text-max-width, 360px)}:host(.size-medium){--empty-state-text-max-width:440px}:host(.size-large){--empty-state-text-max-width:520px}::slotted([slot="secondary"]){color:var(--colorNeutralForeground2)}.empty-state-action{display:flex;align-items:center;justify-content:center;margin-top:var(--spacingVerticalXS)}.hidden{display:none}`;
|
|
6641
|
+
const udpEmptyStateCss = () => `:host{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingVerticalS);text-align:center;width:100%;height:100%;padding:var(--spacingVerticalL) var(--spacingHorizontalL);box-sizing:border-box;color:var(--colorNeutralForeground1)}:host(.size-small){--empty-state-icon-size:32px;--empty-state-spinner-scale:1;}:host(.size-medium){--empty-state-icon-size:48px;--empty-state-spinner-scale:1.2;}:host(.size-large){--empty-state-icon-size:64px;--empty-state-spinner-scale:1.455;}.empty-state-icon{display:flex;align-items:center;justify-content:center;width:var(--empty-state-icon-size, 48px);height:var(--empty-state-icon-size, 48px);--udp-icon-size:var(--empty-state-icon-size, 48px)}.icon-slot{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.icon-slot udp-fluent-icon,.icon-slot ::slotted(udp-fluent-icon){width:var(--empty-state-icon-size, 48px);height:var(--empty-state-icon-size, 48px)}udp-spinner{transform:scale(var(--empty-state-spinner-scale, 1))}.empty-state-primary,.empty-state-secondary{display:flex;flex-direction:column;align-items:center;max-width:var(--empty-state-text-max-width, 360px)}.empty-state-primary{font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400)}.empty-state-secondary{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground2)}:host(.size-small) .empty-state-primary{font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300)}:host(.size-large) .empty-state-primary{font-size:var(--fontSizeBase500);line-height:var(--lineHeightBase500)}:host(.size-large) .empty-state-secondary{font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300)}:host(.size-medium){--empty-state-text-max-width:440px}:host(.size-large){--empty-state-text-max-width:520px}::slotted([slot="secondary"]){color:var(--colorNeutralForeground2)}.empty-state-action{display:flex;align-items:center;justify-content:center;margin-top:var(--spacingVerticalXS)}.hidden{display:none}`;
|
|
6642
6642
|
|
|
6643
6643
|
const SPINNER_SIZE_MAP = {
|
|
6644
6644
|
small: 'medium',
|
|
6645
6645
|
medium: 'extra-large',
|
|
6646
6646
|
large: 'huge',
|
|
6647
6647
|
};
|
|
6648
|
+
/* Keep in sync with the .empty-state-primary/.empty-state-secondary tokens in udp-empty-state.css */
|
|
6649
|
+
const TEXT_VARIANT_MAP = {
|
|
6650
|
+
small: { heading: 'body1Strong', description: 'body2' },
|
|
6651
|
+
medium: { heading: 'subtitle2', description: 'body2' },
|
|
6652
|
+
large: { heading: 'subtitle1', description: 'body1' },
|
|
6653
|
+
};
|
|
6648
6654
|
const UdpEmptyState = class {
|
|
6649
6655
|
constructor(hostRef) {
|
|
6650
6656
|
index.registerInstance(this, hostRef);
|
|
@@ -6652,7 +6658,7 @@ const UdpEmptyState = class {
|
|
|
6652
6658
|
this.hasSecondary = false;
|
|
6653
6659
|
this.hasAction = false;
|
|
6654
6660
|
/**
|
|
6655
|
-
* Controls the icon/spinner size and overall spacing.
|
|
6661
|
+
* Controls the icon/spinner size (32/48/64px), text typography, and overall spacing.
|
|
6656
6662
|
*/
|
|
6657
6663
|
this.size = 'medium';
|
|
6658
6664
|
/**
|
|
@@ -6676,7 +6682,8 @@ const UdpEmptyState = class {
|
|
|
6676
6682
|
render() {
|
|
6677
6683
|
const showIconArea = this.loading || this.hasIcon || !!this.iconName;
|
|
6678
6684
|
const showSecondary = this.hasSecondary || !!this.description;
|
|
6679
|
-
|
|
6685
|
+
const textVariants = TEXT_VARIANT_MAP[this.size];
|
|
6686
|
+
return (index.h(index.Host, { key: 'fea9c3a870d3e22072f29e6ca2fadd313daf8173', class: `size-${this.size}` }, index.h("div", { key: 'a4ccc494323edb1796b640d055f01d44233beaff', class: { 'empty-state-icon': true, hidden: !showIconArea } }, index.h("div", { key: '9d282157b317b9484bc74d5a34f45e91e7a29c70', class: { 'icon-slot': true, hidden: this.loading } }, index.h("slot", { key: '93c1b81a650b9c2aacf28f437c77481e43205783', name: "icon", onSlotchange: this.handleSlotChange }, this.iconName && index.h("udp-fluent-icon", { key: '5a423095ab0e873d64838d45c3f78332220e56cf', name: this.iconName }))), this.loading && index.h("udp-spinner", { key: '5cc466d80c94425777f166e7f355b7e92bfd34c0', size: SPINNER_SIZE_MAP[this.size] })), index.h("div", { key: '9c95aca38e09c9c40ed5e052b6f6fa683cf76967', class: "empty-state-primary" }, index.h("slot", { key: '4b6616d1b6a9295f5e94a165be65d0318a13b1df', onSlotchange: this.handleSlotChange }, this.heading && index.h("udp-text", { key: 'd46651d82706c4e59f53b36ebc2610ff227d4f1f', variant: textVariants.heading }, this.heading))), index.h("div", { key: 'ee3a9aeca9671e9b52fd282facfdabcfc52e9757', class: { 'empty-state-secondary': true, hidden: !showSecondary } }, index.h("slot", { key: 'ec27ae6efd4c0ef2b64491504483ce9028b3dcd8', name: "secondary", onSlotchange: this.handleSlotChange }, this.description && index.h("udp-text", { key: 'f8e5c880f8f4f99464340b65706f5adaa004ed0d', variant: textVariants.description }, this.description))), index.h("div", { key: 'a97ef6220e22394d70235dacab8c0dc07718e56a', class: { 'empty-state-action': true, hidden: !this.hasAction } }, index.h("slot", { key: '0c7c8b50228dc4f59f06a38cd7bcb911d924993a', name: "action", onSlotchange: this.handleSlotChange }))));
|
|
6680
6687
|
}
|
|
6681
6688
|
get el() { return index.getElement(this); }
|
|
6682
6689
|
};
|
|
@@ -45,6 +45,14 @@
|
|
|
45
45
|
height: 100%;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
+
/* udp-fluent-icon inlines --udp-icon-size on its own host, which beats the
|
|
49
|
+
inherited value above — size the element box directly instead. */
|
|
50
|
+
.icon-slot udp-fluent-icon,
|
|
51
|
+
.icon-slot ::slotted(udp-fluent-icon) {
|
|
52
|
+
width: var(--empty-state-icon-size, 48px);
|
|
53
|
+
height: var(--empty-state-icon-size, 48px);
|
|
54
|
+
}
|
|
55
|
+
|
|
48
56
|
udp-spinner {
|
|
49
57
|
transform: scale(var(--empty-state-spinner-scale, 1));
|
|
50
58
|
}
|
|
@@ -57,6 +65,37 @@ udp-spinner {
|
|
|
57
65
|
max-width: var(--empty-state-text-max-width, 360px);
|
|
58
66
|
}
|
|
59
67
|
|
|
68
|
+
/* Default typography so bare slotted text matches the heading/description
|
|
69
|
+
props. Scales with size; slotted udp-text keeps its own variant. */
|
|
70
|
+
.empty-state-primary {
|
|
71
|
+
font-family: var(--fontFamilyBase);
|
|
72
|
+
font-weight: var(--fontWeightSemibold);
|
|
73
|
+
font-size: var(--fontSizeBase400);
|
|
74
|
+
line-height: var(--lineHeightBase400);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.empty-state-secondary {
|
|
78
|
+
font-family: var(--fontFamilyBase);
|
|
79
|
+
font-size: var(--fontSizeBase200);
|
|
80
|
+
line-height: var(--lineHeightBase200);
|
|
81
|
+
color: var(--colorNeutralForeground2);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
:host(.size-small) .empty-state-primary {
|
|
85
|
+
font-size: var(--fontSizeBase300);
|
|
86
|
+
line-height: var(--lineHeightBase300);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
:host(.size-large) .empty-state-primary {
|
|
90
|
+
font-size: var(--fontSizeBase500);
|
|
91
|
+
line-height: var(--lineHeightBase500);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
:host(.size-large) .empty-state-secondary {
|
|
95
|
+
font-size: var(--fontSizeBase300);
|
|
96
|
+
line-height: var(--lineHeightBase300);
|
|
97
|
+
}
|
|
98
|
+
|
|
60
99
|
:host(.size-medium) {
|
|
61
100
|
--empty-state-text-max-width: 440px;
|
|
62
101
|
}
|
|
@@ -5,6 +5,12 @@ const SPINNER_SIZE_MAP = {
|
|
|
5
5
|
medium: 'extra-large',
|
|
6
6
|
large: 'huge',
|
|
7
7
|
};
|
|
8
|
+
/* Keep in sync with the .empty-state-primary/.empty-state-secondary tokens in udp-empty-state.css */
|
|
9
|
+
const TEXT_VARIANT_MAP = {
|
|
10
|
+
small: { heading: 'body1Strong', description: 'body2' },
|
|
11
|
+
medium: { heading: 'subtitle2', description: 'body2' },
|
|
12
|
+
large: { heading: 'subtitle1', description: 'body1' },
|
|
13
|
+
};
|
|
8
14
|
/**
|
|
9
15
|
* Empty state component for lists and cards.
|
|
10
16
|
*
|
|
@@ -23,7 +29,7 @@ export class UdpEmptyState {
|
|
|
23
29
|
this.hasSecondary = false;
|
|
24
30
|
this.hasAction = false;
|
|
25
31
|
/**
|
|
26
|
-
* Controls the icon/spinner size and overall spacing.
|
|
32
|
+
* Controls the icon/spinner size (32/48/64px), text typography, and overall spacing.
|
|
27
33
|
*/
|
|
28
34
|
this.size = 'medium';
|
|
29
35
|
/**
|
|
@@ -47,7 +53,8 @@ export class UdpEmptyState {
|
|
|
47
53
|
render() {
|
|
48
54
|
const showIconArea = this.loading || this.hasIcon || !!this.iconName;
|
|
49
55
|
const showSecondary = this.hasSecondary || !!this.description;
|
|
50
|
-
|
|
56
|
+
const textVariants = TEXT_VARIANT_MAP[this.size];
|
|
57
|
+
return (h(Host, { key: 'fea9c3a870d3e22072f29e6ca2fadd313daf8173', class: `size-${this.size}` }, h("div", { key: 'a4ccc494323edb1796b640d055f01d44233beaff', class: { 'empty-state-icon': true, hidden: !showIconArea } }, h("div", { key: '9d282157b317b9484bc74d5a34f45e91e7a29c70', class: { 'icon-slot': true, hidden: this.loading } }, h("slot", { key: '93c1b81a650b9c2aacf28f437c77481e43205783', name: "icon", onSlotchange: this.handleSlotChange }, this.iconName && h("udp-fluent-icon", { key: '5a423095ab0e873d64838d45c3f78332220e56cf', name: this.iconName }))), this.loading && h("udp-spinner", { key: '5cc466d80c94425777f166e7f355b7e92bfd34c0', size: SPINNER_SIZE_MAP[this.size] })), h("div", { key: '9c95aca38e09c9c40ed5e052b6f6fa683cf76967', class: "empty-state-primary" }, h("slot", { key: '4b6616d1b6a9295f5e94a165be65d0318a13b1df', onSlotchange: this.handleSlotChange }, this.heading && h("udp-text", { key: 'd46651d82706c4e59f53b36ebc2610ff227d4f1f', variant: textVariants.heading }, this.heading))), h("div", { key: 'ee3a9aeca9671e9b52fd282facfdabcfc52e9757', class: { 'empty-state-secondary': true, hidden: !showSecondary } }, h("slot", { key: 'ec27ae6efd4c0ef2b64491504483ce9028b3dcd8', name: "secondary", onSlotchange: this.handleSlotChange }, this.description && h("udp-text", { key: 'f8e5c880f8f4f99464340b65706f5adaa004ed0d', variant: textVariants.description }, this.description))), h("div", { key: 'a97ef6220e22394d70235dacab8c0dc07718e56a', class: { 'empty-state-action': true, hidden: !this.hasAction } }, h("slot", { key: '0c7c8b50228dc4f59f06a38cd7bcb911d924993a', name: "action", onSlotchange: this.handleSlotChange }))));
|
|
51
58
|
}
|
|
52
59
|
static get is() { return "udp-empty-state"; }
|
|
53
60
|
static get encapsulation() { return "shadow"; }
|
|
@@ -75,7 +82,7 @@ export class UdpEmptyState {
|
|
|
75
82
|
"optional": false,
|
|
76
83
|
"docs": {
|
|
77
84
|
"tags": [],
|
|
78
|
-
"text": "Controls the icon/spinner size and overall spacing."
|
|
85
|
+
"text": "Controls the icon/spinner size (32/48/64px), text typography, and overall spacing."
|
|
79
86
|
},
|
|
80
87
|
"getter": false,
|
|
81
88
|
"setter": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,h as s,d as
|
|
1
|
+
import{p as e,H as t,h as s,d as i,t as a}from"./index2.js";import{h as n}from"./slot-helpers.js";import{d as o}from"./udp-fluent-icon2.js";import{d as c}from"./udp-spinner2.js";import{d}from"./udp-text2.js";const r={small:"medium",medium:"extra-large",large:"huge"},l={small:{heading:"body1Strong",description:"body2"},medium:{heading:"subtitle2",description:"body2"},large:{heading:"subtitle1",description:"body1"}},p=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.hasIcon=!1,this.hasSecondary=!1,this.hasAction=!1,this.size="medium",this.loading=!1,this.handleSlotChange=()=>{this.checkSlots()}}componentWillLoad(){this.checkSlots()}checkSlots(){this.el&&(this.hasIcon=n(this.el,"icon"),this.hasSecondary=n(this.el,"secondary"),this.hasAction=n(this.el,"action"))}render(){const e=this.hasSecondary||!!this.description,t=l[this.size];return s(i,{key:"fea9c3a870d3e22072f29e6ca2fadd313daf8173",class:`size-${this.size}`},s("div",{key:"a4ccc494323edb1796b640d055f01d44233beaff",class:{"empty-state-icon":!0,hidden:!(this.loading||this.hasIcon||this.iconName)}},s("div",{key:"9d282157b317b9484bc74d5a34f45e91e7a29c70",class:{"icon-slot":!0,hidden:this.loading}},s("slot",{key:"93c1b81a650b9c2aacf28f437c77481e43205783",name:"icon",onSlotchange:this.handleSlotChange},this.iconName&&s("udp-fluent-icon",{key:"5a423095ab0e873d64838d45c3f78332220e56cf",name:this.iconName}))),this.loading&&s("udp-spinner",{key:"5cc466d80c94425777f166e7f355b7e92bfd34c0",size:r[this.size]})),s("div",{key:"9c95aca38e09c9c40ed5e052b6f6fa683cf76967",class:"empty-state-primary"},s("slot",{key:"4b6616d1b6a9295f5e94a165be65d0318a13b1df",onSlotchange:this.handleSlotChange},this.heading&&s("udp-text",{key:"d46651d82706c4e59f53b36ebc2610ff227d4f1f",variant:t.heading},this.heading))),s("div",{key:"ee3a9aeca9671e9b52fd282facfdabcfc52e9757",class:{"empty-state-secondary":!0,hidden:!e}},s("slot",{key:"ec27ae6efd4c0ef2b64491504483ce9028b3dcd8",name:"secondary",onSlotchange:this.handleSlotChange},this.description&&s("udp-text",{key:"f8e5c880f8f4f99464340b65706f5adaa004ed0d",variant:t.description},this.description))),s("div",{key:"a97ef6220e22394d70235dacab8c0dc07718e56a",class:{"empty-state-action":!0,hidden:!this.hasAction}},s("slot",{key:"0c7c8b50228dc4f59f06a38cd7bcb911d924993a",name:"action",onSlotchange:this.handleSlotChange})))}get el(){return this}static get style(){return':host{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingVerticalS);text-align:center;width:100%;height:100%;padding:var(--spacingVerticalL) var(--spacingHorizontalL);box-sizing:border-box;color:var(--colorNeutralForeground1)}:host(.size-small){--empty-state-icon-size:32px;--empty-state-spinner-scale:1;}:host(.size-medium){--empty-state-icon-size:48px;--empty-state-spinner-scale:1.2;}:host(.size-large){--empty-state-icon-size:64px;--empty-state-spinner-scale:1.455;}.empty-state-icon{display:flex;align-items:center;justify-content:center;width:var(--empty-state-icon-size, 48px);height:var(--empty-state-icon-size, 48px);--udp-icon-size:var(--empty-state-icon-size, 48px)}.icon-slot{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.icon-slot udp-fluent-icon,.icon-slot ::slotted(udp-fluent-icon){width:var(--empty-state-icon-size, 48px);height:var(--empty-state-icon-size, 48px)}udp-spinner{transform:scale(var(--empty-state-spinner-scale, 1))}.empty-state-primary,.empty-state-secondary{display:flex;flex-direction:column;align-items:center;max-width:var(--empty-state-text-max-width, 360px)}.empty-state-primary{font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400)}.empty-state-secondary{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground2)}:host(.size-small) .empty-state-primary{font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300)}:host(.size-large) .empty-state-primary{font-size:var(--fontSizeBase500);line-height:var(--lineHeightBase500)}:host(.size-large) .empty-state-secondary{font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300)}:host(.size-medium){--empty-state-text-max-width:440px}:host(.size-large){--empty-state-text-max-width:520px}::slotted([slot="secondary"]){color:var(--colorNeutralForeground2)}.empty-state-action{display:flex;align-items:center;justify-content:center;margin-top:var(--spacingVerticalXS)}.hidden{display:none}'}},[257,"udp-empty-state",{size:[1],loading:[4],iconName:[1,"icon-name"],heading:[1],description:[1],hasIcon:[32],hasSecondary:[32],hasAction:[32]}]);function h(){"undefined"!=typeof customElements&&["udp-empty-state","udp-fluent-icon","udp-spinner","udp-text"].forEach((e=>{switch(e){case"udp-empty-state":customElements.get(a(e))||customElements.define(a(e),p);break;case"udp-fluent-icon":customElements.get(a(e))||o();break;case"udp-spinner":customElements.get(a(e))||c();break;case"udp-text":customElements.get(a(e))||d()}}))}export{p as U,h as d}
|
package/dist/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-
|
|
2
|
+
"timestamp": "2026-08-04T18:45:58",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.41.3",
|
|
@@ -44354,7 +44354,7 @@
|
|
|
44354
44354
|
"mutable": false,
|
|
44355
44355
|
"attr": "size",
|
|
44356
44356
|
"reflectToAttr": false,
|
|
44357
|
-
"docs": "Controls the icon/spinner size and overall spacing.",
|
|
44357
|
+
"docs": "Controls the icon/spinner size (32/48/64px), text typography, and overall spacing.",
|
|
44358
44358
|
"docsTags": [
|
|
44359
44359
|
{
|
|
44360
44360
|
"name": "default",
|
|
@@ -6632,13 +6632,19 @@ const UdpDialog = class {
|
|
|
6632
6632
|
};
|
|
6633
6633
|
UdpDialog.style = udpDialogCss();
|
|
6634
6634
|
|
|
6635
|
-
const udpEmptyStateCss = () => `:host{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingVerticalS);text-align:center;width:100%;height:100%;padding:var(--spacingVerticalL) var(--spacingHorizontalL);box-sizing:border-box;color:var(--colorNeutralForeground1)}:host(.size-small){--empty-state-icon-size:32px;--empty-state-spinner-scale:1;}:host(.size-medium){--empty-state-icon-size:48px;--empty-state-spinner-scale:1.2;}:host(.size-large){--empty-state-icon-size:64px;--empty-state-spinner-scale:1.455;}.empty-state-icon{display:flex;align-items:center;justify-content:center;width:var(--empty-state-icon-size, 48px);height:var(--empty-state-icon-size, 48px);--udp-icon-size:var(--empty-state-icon-size, 48px)}.icon-slot{display:flex;align-items:center;justify-content:center;width:100%;height:100%}udp-spinner{transform:scale(var(--empty-state-spinner-scale, 1))}.empty-state-primary,.empty-state-secondary{display:flex;flex-direction:column;align-items:center;max-width:var(--empty-state-text-max-width, 360px)}:host(.size-medium){--empty-state-text-max-width:440px}:host(.size-large){--empty-state-text-max-width:520px}::slotted([slot="secondary"]){color:var(--colorNeutralForeground2)}.empty-state-action{display:flex;align-items:center;justify-content:center;margin-top:var(--spacingVerticalXS)}.hidden{display:none}`;
|
|
6635
|
+
const udpEmptyStateCss = () => `:host{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingVerticalS);text-align:center;width:100%;height:100%;padding:var(--spacingVerticalL) var(--spacingHorizontalL);box-sizing:border-box;color:var(--colorNeutralForeground1)}:host(.size-small){--empty-state-icon-size:32px;--empty-state-spinner-scale:1;}:host(.size-medium){--empty-state-icon-size:48px;--empty-state-spinner-scale:1.2;}:host(.size-large){--empty-state-icon-size:64px;--empty-state-spinner-scale:1.455;}.empty-state-icon{display:flex;align-items:center;justify-content:center;width:var(--empty-state-icon-size, 48px);height:var(--empty-state-icon-size, 48px);--udp-icon-size:var(--empty-state-icon-size, 48px)}.icon-slot{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.icon-slot udp-fluent-icon,.icon-slot ::slotted(udp-fluent-icon){width:var(--empty-state-icon-size, 48px);height:var(--empty-state-icon-size, 48px)}udp-spinner{transform:scale(var(--empty-state-spinner-scale, 1))}.empty-state-primary,.empty-state-secondary{display:flex;flex-direction:column;align-items:center;max-width:var(--empty-state-text-max-width, 360px)}.empty-state-primary{font-family:var(--fontFamilyBase);font-weight:var(--fontWeightSemibold);font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400)}.empty-state-secondary{font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);line-height:var(--lineHeightBase200);color:var(--colorNeutralForeground2)}:host(.size-small) .empty-state-primary{font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300)}:host(.size-large) .empty-state-primary{font-size:var(--fontSizeBase500);line-height:var(--lineHeightBase500)}:host(.size-large) .empty-state-secondary{font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300)}:host(.size-medium){--empty-state-text-max-width:440px}:host(.size-large){--empty-state-text-max-width:520px}::slotted([slot="secondary"]){color:var(--colorNeutralForeground2)}.empty-state-action{display:flex;align-items:center;justify-content:center;margin-top:var(--spacingVerticalXS)}.hidden{display:none}`;
|
|
6636
6636
|
|
|
6637
6637
|
const SPINNER_SIZE_MAP = {
|
|
6638
6638
|
small: 'medium',
|
|
6639
6639
|
medium: 'extra-large',
|
|
6640
6640
|
large: 'huge',
|
|
6641
6641
|
};
|
|
6642
|
+
/* Keep in sync with the .empty-state-primary/.empty-state-secondary tokens in udp-empty-state.css */
|
|
6643
|
+
const TEXT_VARIANT_MAP = {
|
|
6644
|
+
small: { heading: 'body1Strong', description: 'body2' },
|
|
6645
|
+
medium: { heading: 'subtitle2', description: 'body2' },
|
|
6646
|
+
large: { heading: 'subtitle1', description: 'body1' },
|
|
6647
|
+
};
|
|
6642
6648
|
const UdpEmptyState = class {
|
|
6643
6649
|
constructor(hostRef) {
|
|
6644
6650
|
registerInstance(this, hostRef);
|
|
@@ -6646,7 +6652,7 @@ const UdpEmptyState = class {
|
|
|
6646
6652
|
this.hasSecondary = false;
|
|
6647
6653
|
this.hasAction = false;
|
|
6648
6654
|
/**
|
|
6649
|
-
* Controls the icon/spinner size and overall spacing.
|
|
6655
|
+
* Controls the icon/spinner size (32/48/64px), text typography, and overall spacing.
|
|
6650
6656
|
*/
|
|
6651
6657
|
this.size = 'medium';
|
|
6652
6658
|
/**
|
|
@@ -6670,7 +6676,8 @@ const UdpEmptyState = class {
|
|
|
6670
6676
|
render() {
|
|
6671
6677
|
const showIconArea = this.loading || this.hasIcon || !!this.iconName;
|
|
6672
6678
|
const showSecondary = this.hasSecondary || !!this.description;
|
|
6673
|
-
|
|
6679
|
+
const textVariants = TEXT_VARIANT_MAP[this.size];
|
|
6680
|
+
return (h(Host, { key: 'fea9c3a870d3e22072f29e6ca2fadd313daf8173', class: `size-${this.size}` }, h("div", { key: 'a4ccc494323edb1796b640d055f01d44233beaff', class: { 'empty-state-icon': true, hidden: !showIconArea } }, h("div", { key: '9d282157b317b9484bc74d5a34f45e91e7a29c70', class: { 'icon-slot': true, hidden: this.loading } }, h("slot", { key: '93c1b81a650b9c2aacf28f437c77481e43205783', name: "icon", onSlotchange: this.handleSlotChange }, this.iconName && h("udp-fluent-icon", { key: '5a423095ab0e873d64838d45c3f78332220e56cf', name: this.iconName }))), this.loading && h("udp-spinner", { key: '5cc466d80c94425777f166e7f355b7e92bfd34c0', size: SPINNER_SIZE_MAP[this.size] })), h("div", { key: '9c95aca38e09c9c40ed5e052b6f6fa683cf76967', class: "empty-state-primary" }, h("slot", { key: '4b6616d1b6a9295f5e94a165be65d0318a13b1df', onSlotchange: this.handleSlotChange }, this.heading && h("udp-text", { key: 'd46651d82706c4e59f53b36ebc2610ff227d4f1f', variant: textVariants.heading }, this.heading))), h("div", { key: 'ee3a9aeca9671e9b52fd282facfdabcfc52e9757', class: { 'empty-state-secondary': true, hidden: !showSecondary } }, h("slot", { key: 'ec27ae6efd4c0ef2b64491504483ce9028b3dcd8', name: "secondary", onSlotchange: this.handleSlotChange }, this.description && h("udp-text", { key: 'f8e5c880f8f4f99464340b65706f5adaa004ed0d', variant: textVariants.description }, this.description))), h("div", { key: 'a97ef6220e22394d70235dacab8c0dc07718e56a', class: { 'empty-state-action': true, hidden: !this.hasAction } }, h("slot", { key: '0c7c8b50228dc4f59f06a38cd7bcb911d924993a', name: "action", onSlotchange: this.handleSlotChange }))));
|
|
6674
6681
|
}
|
|
6675
6682
|
get el() { return getElement(this); }
|
|
6676
6683
|
};
|