@plaidev/karte-action-sdk 1.1.268-29128731.e21f076b → 1.1.268-29130290.f4c098fe
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/components-flex/avatar/types.d.ts +2 -2
- package/dist/components-flex/close-button/types.d.ts +4 -4
- package/dist/components-flex/image/types.d.ts +2 -2
- package/dist/components-flex/layout/types.d.ts +1 -0
- package/dist/components-flex/list/types.d.ts +2 -5
- package/dist/components-flex/multi-column/types.d.ts +2 -5
- package/dist/components-flex/props.d.ts +18 -11
- package/dist/components-flex/utils/prop-to-style.d.ts +3 -2
- package/dist/components-flex/variants.d.ts +8 -2
- package/dist/hydrate/components-flex/avatar/types.d.ts +2 -2
- package/dist/hydrate/components-flex/close-button/types.d.ts +4 -4
- package/dist/hydrate/components-flex/image/types.d.ts +2 -2
- package/dist/hydrate/components-flex/layout/types.d.ts +1 -0
- package/dist/hydrate/components-flex/list/types.d.ts +2 -5
- package/dist/hydrate/components-flex/multi-column/types.d.ts +2 -5
- package/dist/hydrate/components-flex/props.d.ts +18 -11
- package/dist/hydrate/components-flex/utils/prop-to-style.d.ts +3 -2
- package/dist/hydrate/components-flex/variants.d.ts +8 -2
- package/dist/hydrate/index.es.js +209 -86
- package/dist/index.es.js +207 -85
- package/dist/svelte5/components-flex/avatar/types.d.ts +2 -2
- package/dist/svelte5/components-flex/close-button/types.d.ts +4 -4
- package/dist/svelte5/components-flex/image/types.d.ts +2 -2
- package/dist/svelte5/components-flex/layout/types.d.ts +1 -0
- package/dist/svelte5/components-flex/list/types.d.ts +2 -5
- package/dist/svelte5/components-flex/multi-column/types.d.ts +2 -5
- package/dist/svelte5/components-flex/props.d.ts +18 -11
- package/dist/svelte5/components-flex/utils/prop-to-style.d.ts +3 -2
- package/dist/svelte5/components-flex/variants.d.ts +8 -2
- package/dist/svelte5/hydrate/components-flex/avatar/types.d.ts +2 -2
- package/dist/svelte5/hydrate/components-flex/close-button/types.d.ts +4 -4
- package/dist/svelte5/hydrate/components-flex/image/types.d.ts +2 -2
- package/dist/svelte5/hydrate/components-flex/layout/types.d.ts +1 -0
- package/dist/svelte5/hydrate/components-flex/list/types.d.ts +2 -5
- package/dist/svelte5/hydrate/components-flex/multi-column/types.d.ts +2 -5
- package/dist/svelte5/hydrate/components-flex/props.d.ts +18 -11
- package/dist/svelte5/hydrate/components-flex/utils/prop-to-style.d.ts +3 -2
- package/dist/svelte5/hydrate/components-flex/variants.d.ts +8 -2
- package/dist/svelte5/hydrate/index.es.js +182 -69
- package/dist/svelte5/index.es.js +182 -69
- package/dist/svelte5/index.front2.es.js +185 -68
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
@@ -11725,6 +11725,52 @@ const SHADOW_VARIANT = {
|
|
11725
11725
|
}
|
11726
11726
|
};
|
11727
11727
|
const SHADOW_VARIANTS = toVariantArray(SHADOW_VARIANT);
|
11728
|
+
const BACKGROUND_COLOR_VARIANT = {
|
11729
|
+
base: {
|
11730
|
+
name: "ホワイト",
|
11731
|
+
getProps: () => ({ backgroundColor: "#FFFFFF" })
|
11732
|
+
},
|
11733
|
+
dark: {
|
11734
|
+
name: "ブラック",
|
11735
|
+
getProps: () => ({ backgroundColor: "#000000" })
|
11736
|
+
},
|
11737
|
+
gray: {
|
11738
|
+
name: "グレー",
|
11739
|
+
getProps: () => ({ backgroundColor: "#ECECEC" })
|
11740
|
+
},
|
11741
|
+
brand: {
|
11742
|
+
name: "ブランド",
|
11743
|
+
getProps: (kit) => ({ backgroundColor: getBrandKit(kit).color_brand })
|
11744
|
+
},
|
11745
|
+
danger: {
|
11746
|
+
name: "デンジャー",
|
11747
|
+
getProps: (kit) => ({ backgroundColor: getBrandKit(kit).color_danger })
|
11748
|
+
}
|
11749
|
+
};
|
11750
|
+
const BACKGROUND_COLOR_VARIANTS = toVariantArray(BACKGROUND_COLOR_VARIANT);
|
11751
|
+
const BORDER_COLOR_VARIANT = {
|
11752
|
+
black: {
|
11753
|
+
name: "ブラック",
|
11754
|
+
getProps: () => ({ borderColor: "#000000" })
|
11755
|
+
},
|
11756
|
+
gray: {
|
11757
|
+
name: "グレー",
|
11758
|
+
getProps: () => ({ borderColor: "#DBDBDB" })
|
11759
|
+
},
|
11760
|
+
brand: {
|
11761
|
+
name: "ブランド",
|
11762
|
+
getProps: (kit) => ({ borderColor: getBrandKit(kit).color_brand })
|
11763
|
+
},
|
11764
|
+
danger: {
|
11765
|
+
name: "デンジャー",
|
11766
|
+
getProps: (kit) => ({ borderColor: getBrandKit(kit).color_danger })
|
11767
|
+
},
|
11768
|
+
base: {
|
11769
|
+
name: "ホワイト",
|
11770
|
+
getProps: () => ({ borderColor: "#FFFFFF" })
|
11771
|
+
}
|
11772
|
+
};
|
11773
|
+
const BORDER_COLOR_VARIANTS = toVariantArray(BORDER_COLOR_VARIANT);
|
11728
11774
|
|
11729
11775
|
//#endregion
|
11730
11776
|
//#region src/components-flex/utils/prop-to-style.ts
|
@@ -11741,11 +11787,12 @@ const toCssPosition = (p) => {
|
|
11741
11787
|
const toCssCommon = (p) => {
|
11742
11788
|
return { ...toCssPosition(p) };
|
11743
11789
|
};
|
11744
|
-
const toCssBorder = (p) => {
|
11790
|
+
const toCssBorder = (p, brandKit) => {
|
11745
11791
|
const borderWidth = p?.borderTopWidth ?? p?.borderRightWidth ?? p?.borderLeftWidth ?? p?.borderBottomWidth ?? null;
|
11746
11792
|
if (borderWidth === null) return {};
|
11793
|
+
const variant = BORDER_COLOR_VARIANT[p?.borderColorVariant];
|
11747
11794
|
return {
|
11748
|
-
borderColor: p?.borderColor,
|
11795
|
+
borderColor: p?.borderColor ?? variant?.getProps(brandKit)?.borderColor,
|
11749
11796
|
borderStyle: "solid",
|
11750
11797
|
borderTopWidth: p?.borderTopWidth,
|
11751
11798
|
borderLeftWidth: p?.borderLeftWidth,
|
@@ -11761,16 +11808,19 @@ const toCssPadding = (p) => {
|
|
11761
11808
|
paddingBottom: p?.paddingBottom
|
11762
11809
|
};
|
11763
11810
|
};
|
11764
|
-
const toCssBackground = (p) => {
|
11811
|
+
const toCssBackground = (p, brandKit) => {
|
11765
11812
|
const url = p?.backgroundImageUrl;
|
11813
|
+
const variant = BACKGROUND_COLOR_VARIANT[p?.backgroundColorVariant];
|
11766
11814
|
return {
|
11767
|
-
|
11768
|
-
|
11769
|
-
|
11770
|
-
|
11771
|
-
|
11772
|
-
|
11773
|
-
|
11815
|
+
backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor ?? variant?.getProps(brandKit)?.backgroundColor,
|
11816
|
+
...url ? {
|
11817
|
+
backgroundSize: url ? "cover" : void 0,
|
11818
|
+
backgroundImage: url ? `url(${url})` : void 0,
|
11819
|
+
backgroundPositionX: p?.backgroundPositionX ?? "center",
|
11820
|
+
backgroundPositionY: p?.backgroundPositionY ?? "center",
|
11821
|
+
backgroundBlendMode: p?.backgroundBlendMode,
|
11822
|
+
backgroundRepeat: "no-repeat"
|
11823
|
+
} : {}
|
11774
11824
|
};
|
11775
11825
|
};
|
11776
11826
|
const toCssRadius = (p) => {
|
@@ -12008,6 +12058,7 @@ function create_fragment$58(ctx) {
|
|
12008
12058
|
};
|
12009
12059
|
}
|
12010
12060
|
function instance$58($$self, $$props, $$invalidate) {
|
12061
|
+
let styleObj;
|
12011
12062
|
let style;
|
12012
12063
|
let imgStyle;
|
12013
12064
|
let { props = {} } = $$props;
|
@@ -12023,24 +12074,38 @@ function instance$58($$self, $$props, $$invalidate) {
|
|
12023
12074
|
square: { borderRadius: "0.25em" },
|
12024
12075
|
rounded: { borderRadius: "1em" }
|
12025
12076
|
} };
|
12077
|
+
const calcImgRadius = (parentRadius, borderWidth) => {
|
12078
|
+
const radiusSize = parentRadius ? parseInt(parentRadius) : 0;
|
12079
|
+
if (radiusSize === 0) return 0;
|
12080
|
+
if (parentRadius === "100%") return "100%";
|
12081
|
+
return radiusSize > 0 ? `calc(${parentRadius} - ${borderWidth})` : void 0;
|
12082
|
+
};
|
12026
12083
|
$$self.$$set = ($$props$1) => {
|
12027
12084
|
if ("props" in $$props$1) $$invalidate(0, props = $$props$1.props);
|
12028
12085
|
if ("layerId" in $$props$1) $$invalidate(1, layerId = $$props$1.layerId);
|
12029
12086
|
};
|
12030
12087
|
$$self.$$.update = () => {
|
12031
|
-
if ($$self.$$.dirty & 1) $: $$invalidate(
|
12088
|
+
if ($$self.$$.dirty & 1) $: $$invalidate(7, styleObj = {
|
12032
12089
|
...VARIANTS.shape[props.shape ?? "square"],
|
12033
12090
|
width: props.width ?? avatarSizeStyle.width,
|
12034
12091
|
height: props.height ?? avatarSizeStyle.height,
|
12035
12092
|
...toCssCommon(props),
|
12036
|
-
...toCssBorder(props)
|
12093
|
+
...toCssBorder(props),
|
12094
|
+
...toCssPadding(props)
|
12095
|
+
});
|
12096
|
+
if ($$self.$$.dirty & 128) $: $$invalidate(3, style = objToStyle(styleObj));
|
12097
|
+
if ($$self.$$.dirty & 128) $: $$invalidate(2, imgStyle = objToStyle({
|
12098
|
+
width: "100%",
|
12099
|
+
height: "100%",
|
12100
|
+
objectFit: "cover",
|
12101
|
+
...toCssRadius({
|
12102
|
+
borderTopLeftRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth),
|
12103
|
+
borderTopRightRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth),
|
12104
|
+
borderBottomLeftRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth),
|
12105
|
+
borderBottomRightRadius: calcImgRadius(styleObj.borderRadius, styleObj.borderTopWidth)
|
12106
|
+
})
|
12037
12107
|
}));
|
12038
12108
|
};
|
12039
|
-
$: $$invalidate(2, imgStyle = objToStyle({
|
12040
|
-
width: "100%",
|
12041
|
-
height: "100%",
|
12042
|
-
objectFit: "cover"
|
12043
|
-
}));
|
12044
12109
|
return [
|
12045
12110
|
props,
|
12046
12111
|
layerId,
|
@@ -12048,7 +12113,8 @@ function instance$58($$self, $$props, $$invalidate) {
|
|
12048
12113
|
style,
|
12049
12114
|
attributes,
|
12050
12115
|
element$1,
|
12051
|
-
handleClick
|
12116
|
+
handleClick,
|
12117
|
+
styleObj
|
12052
12118
|
];
|
12053
12119
|
}
|
12054
12120
|
var Avatar = class extends SvelteComponent {
|
@@ -15213,10 +15279,24 @@ const BUTTON_TEXT_THEME = {
|
|
15213
15279
|
white: "White"
|
15214
15280
|
};
|
15215
15281
|
|
15282
|
+
//#endregion
|
15283
|
+
//#region src/components-flex/text/styles.ts
|
15284
|
+
const callback$1 = ({ brandKit }) => ({
|
15285
|
+
default: { color: brandKit.color_text_primary },
|
15286
|
+
gray: { color: brandKit.color_text_secondary },
|
15287
|
+
brand: { color: brandKit.color_brand },
|
15288
|
+
success: { color: brandKit.color_success },
|
15289
|
+
warning: { color: brandKit.color_warning },
|
15290
|
+
danger: { color: brandKit.color_danger },
|
15291
|
+
info: { color: brandKit.color_info },
|
15292
|
+
white: { color: brandKit.color_white }
|
15293
|
+
});
|
15294
|
+
const getTextThemeStyles = getPropStyles(callback$1);
|
15295
|
+
|
15216
15296
|
//#endregion
|
15217
15297
|
//#region src/components-flex/close-button/CloseButton.svelte
|
15218
15298
|
function add_css$18(target) {
|
15219
|
-
append_styles(target, "svelte-
|
15299
|
+
append_styles(target, "svelte-18wmfyq", ".close-button.svelte-18wmfyq.svelte-18wmfyq{display:inline-flex;align-items:center;justify-content:center;align-self:center;gap:8px;border-radius:100%;background:none;cursor:pointer;border:0;outline:0;flex-shrink:0;transition:background-color 0.12s,\n border-color 0.12s,\n color 0.12s}.close-button.svelte-18wmfyq svg.svelte-18wmfyq{transition:transform 0.12s}.close-button.svelte-18wmfyq:hover svg.svelte-18wmfyq{transform:rotate(90deg)}.close-button-order-one.svelte-18wmfyq.svelte-18wmfyq{order:1}.close-button-order-two.svelte-18wmfyq.svelte-18wmfyq{order:2}");
|
15220
15300
|
}
|
15221
15301
|
function create_if_block$6(ctx) {
|
15222
15302
|
let span;
|
@@ -15235,7 +15315,7 @@ function create_if_block$6(ctx) {
|
|
15235
15315
|
/*labelStyle*/
|
15236
15316
|
ctx[2]
|
15237
15317
|
);
|
15238
|
-
attr(span, "class", span_class_value = "close-button-label " + (ctx[10] ? "close-button-order-one" : "") + " svelte-
|
15318
|
+
attr(span, "class", span_class_value = "close-button-label " + (ctx[10] ? "close-button-order-one" : "") + " svelte-18wmfyq");
|
15239
15319
|
},
|
15240
15320
|
m(target, anchor) {
|
15241
15321
|
insert(target, span, anchor);
|
@@ -15294,7 +15374,7 @@ function create_dynamic_element$6(ctx) {
|
|
15294
15374
|
/*color*/
|
15295
15375
|
ctx[8]
|
15296
15376
|
);
|
15297
|
-
attr(svg, "class", "svelte-
|
15377
|
+
attr(svg, "class", "svelte-18wmfyq");
|
15298
15378
|
attr(
|
15299
15379
|
span,
|
15300
15380
|
"style",
|
@@ -15306,7 +15386,7 @@ function create_dynamic_element$6(ctx) {
|
|
15306
15386
|
ctx[6]
|
15307
15387
|
)) set_custom_element_data_map(svelte_element, svelte_element_data);
|
15308
15388
|
else set_attributes(svelte_element, svelte_element_data);
|
15309
|
-
toggle_class(svelte_element, "svelte-
|
15389
|
+
toggle_class(svelte_element, "svelte-18wmfyq", true);
|
15310
15390
|
},
|
15311
15391
|
m(target, anchor) {
|
15312
15392
|
insert(target, svelte_element, anchor);
|
@@ -15353,7 +15433,7 @@ function create_dynamic_element$6(ctx) {
|
|
15353
15433
|
ctx$1[6]
|
15354
15434
|
)) set_custom_element_data_map(svelte_element, svelte_element_data);
|
15355
15435
|
else set_attributes(svelte_element, svelte_element_data);
|
15356
|
-
toggle_class(svelte_element, "svelte-
|
15436
|
+
toggle_class(svelte_element, "svelte-18wmfyq", true);
|
15357
15437
|
},
|
15358
15438
|
d(detaching) {
|
15359
15439
|
if (detaching) detach(svelte_element);
|
@@ -15407,13 +15487,17 @@ function create_fragment$22(ctx) {
|
|
15407
15487
|
}
|
15408
15488
|
function instance$22($$self, $$props, $$invalidate) {
|
15409
15489
|
let hasLabel;
|
15490
|
+
let styleObj;
|
15410
15491
|
let style;
|
15492
|
+
let borderWidth;
|
15493
|
+
let paddingSize;
|
15411
15494
|
let labelStyle;
|
15412
15495
|
let iconStyle;
|
15413
15496
|
let { props = {} } = $$props;
|
15414
15497
|
let { layerId = "" } = $$props;
|
15415
15498
|
let { eventName = "" } = $$props;
|
15416
15499
|
let { eventValue = void 0 } = $$props;
|
15500
|
+
const { brandKit } = useBrandKit();
|
15417
15501
|
useInjectCustomizeCss(props);
|
15418
15502
|
const { attributes, element: element$1, handleClick } = useClickable_default({
|
15419
15503
|
onClick: {
|
@@ -15449,7 +15533,7 @@ function instance$22($$self, $$props, $$invalidate) {
|
|
15449
15533
|
}
|
15450
15534
|
};
|
15451
15535
|
const size = props.size ?? 24;
|
15452
|
-
const color = props.color ?? "#666";
|
15536
|
+
const color = props.color ?? getTextThemeStyles(brandKit)[props.colorVariant]?.color ?? "#666";
|
15453
15537
|
const label = props.label;
|
15454
15538
|
const isLeftLabelPlacement = props.labelPlacement === "left";
|
15455
15539
|
$$self.$$set = ($$props$1) => {
|
@@ -15459,26 +15543,40 @@ function instance$22($$self, $$props, $$invalidate) {
|
|
15459
15543
|
if ("eventValue" in $$props$1) $$invalidate(13, eventValue = $$props$1.eventValue);
|
15460
15544
|
};
|
15461
15545
|
$$self.$$.update = () => {
|
15462
|
-
if ($$self.$$.dirty & 2048) $: $$invalidate(
|
15463
|
-
...props.bordered && {
|
15464
|
-
|
15465
|
-
|
15546
|
+
if ($$self.$$.dirty & 2048) $: $$invalidate(16, styleObj = {
|
15547
|
+
...props.bordered && {
|
15548
|
+
borderTopWidth: "1px",
|
15549
|
+
borderLeftWidth: "1px",
|
15550
|
+
borderRightWidth: "1px",
|
15551
|
+
borderBottomWidth: "1px",
|
15552
|
+
borderStyle: "solid",
|
15553
|
+
borderColor: "#666666"
|
15554
|
+
},
|
15466
15555
|
padding: "6px",
|
15467
|
-
|
15556
|
+
boxSizing: "border-box",
|
15557
|
+
backgroundColor: toCssBackground(props, brandKit)?.backgroundColor ?? "rgba(255,255,255,0)",
|
15468
15558
|
...VARIANTS.round[props.round ?? "default"],
|
15559
|
+
...toCssPadding(props),
|
15469
15560
|
...toCssCommon(props),
|
15470
15561
|
...toCssBorder(props)
|
15471
|
-
})
|
15562
|
+
});
|
15563
|
+
if ($$self.$$.dirty & 65536) $: $$invalidate(3, style = objToStyle(styleObj));
|
15564
|
+
if ($$self.$$.dirty & 65536) $: $$invalidate(14, borderWidth = styleObj.borderTopWidth ? parseInt(styleObj.borderTopWidth) : 0);
|
15565
|
+
if ($$self.$$.dirty & 65536) $: $$invalidate(15, paddingSize = styleObj.paddingTop ? parseInt(styleObj.paddingTop) : 6);
|
15472
15566
|
if ($$self.$$.dirty & 2048) $: $$invalidate(2, labelStyle = objToStyle({
|
15473
|
-
color: props.labelColor ?? color,
|
15567
|
+
color: props.labelColor ?? getTextThemeStyles(brandKit)[props.labelColorVariant]?.color ?? color,
|
15474
15568
|
fontSize: `${size / 2.1}px`
|
15475
15569
|
}));
|
15570
|
+
if ($$self.$$.dirty & 49152) $: $$invalidate(1, iconStyle = objToStyle({
|
15571
|
+
width: `${size - paddingSize * 2 - borderWidth * 2}px`,
|
15572
|
+
height: `${size - paddingSize * 2 - borderWidth * 2}px`,
|
15573
|
+
display: "flex",
|
15574
|
+
alignItems: "center",
|
15575
|
+
justifyContent: "center",
|
15576
|
+
flexShrink: 0
|
15577
|
+
}));
|
15476
15578
|
};
|
15477
15579
|
$: $$invalidate(4, hasLabel = label !== void 0 && label !== "");
|
15478
|
-
$: $$invalidate(1, iconStyle = objToStyle({
|
15479
|
-
width: `${size - 12}px`,
|
15480
|
-
height: `${size - 12}px`
|
15481
|
-
}));
|
15482
15580
|
return [
|
15483
15581
|
layerId,
|
15484
15582
|
iconStyle,
|
@@ -15493,7 +15591,10 @@ function instance$22($$self, $$props, $$invalidate) {
|
|
15493
15591
|
isLeftLabelPlacement,
|
15494
15592
|
props,
|
15495
15593
|
eventName,
|
15496
|
-
eventValue
|
15594
|
+
eventValue,
|
15595
|
+
borderWidth,
|
15596
|
+
paddingSize,
|
15597
|
+
styleObj
|
15497
15598
|
];
|
15498
15599
|
}
|
15499
15600
|
var CloseButton = class extends SvelteComponent {
|
@@ -15570,16 +15671,16 @@ const IMAGE_ROUND_STYLES = {
|
|
15570
15671
|
borderBottomRightRadius: 0
|
15571
15672
|
},
|
15572
15673
|
rounded: {
|
15573
|
-
borderTopLeftRadius: "
|
15574
|
-
borderTopRightRadius: "
|
15575
|
-
borderBottomLeftRadius: "
|
15576
|
-
borderBottomRightRadius: "
|
15674
|
+
borderTopLeftRadius: "8px",
|
15675
|
+
borderTopRightRadius: "8px",
|
15676
|
+
borderBottomLeftRadius: "8px",
|
15677
|
+
borderBottomRightRadius: "8px"
|
15577
15678
|
},
|
15578
15679
|
circle: {
|
15579
|
-
borderTopLeftRadius: "
|
15580
|
-
borderTopRightRadius: "
|
15581
|
-
borderBottomLeftRadius: "
|
15582
|
-
borderBottomRightRadius: "
|
15680
|
+
borderTopLeftRadius: "16px",
|
15681
|
+
borderTopRightRadius: "16px",
|
15682
|
+
borderBottomLeftRadius: "16px",
|
15683
|
+
borderBottomRightRadius: "16px"
|
15583
15684
|
}
|
15584
15685
|
};
|
15585
15686
|
|
@@ -15596,9 +15697,9 @@ function create_dynamic_element$5(ctx) {
|
|
15596
15697
|
let mounted;
|
15597
15698
|
let dispose;
|
15598
15699
|
let svelte_element_levels = [
|
15599
|
-
ctx[
|
15700
|
+
ctx[4],
|
15600
15701
|
{ class: "image" },
|
15601
|
-
{ style: ctx[
|
15702
|
+
{ style: ctx[3] },
|
15602
15703
|
{ "data-layer-id": ctx[1] }
|
15603
15704
|
];
|
15604
15705
|
let svelte_element_data = {};
|
@@ -15607,15 +15708,21 @@ function create_dynamic_element$5(ctx) {
|
|
15607
15708
|
c() {
|
15608
15709
|
svelte_element = element(
|
15609
15710
|
/*element*/
|
15610
|
-
ctx[
|
15711
|
+
ctx[5]
|
15611
15712
|
);
|
15612
15713
|
img = element("img");
|
15613
15714
|
if (!src_url_equal(img.src, img_src_value = ctx[0].image)) attr(img, "src", img_src_value);
|
15614
15715
|
attr(img, "alt", img_alt_value = ctx[0].alt);
|
15716
|
+
attr(
|
15717
|
+
img,
|
15718
|
+
"style",
|
15719
|
+
/*imgStyle*/
|
15720
|
+
ctx[2]
|
15721
|
+
);
|
15615
15722
|
attr(img, "class", "image-img svelte-1olvu11");
|
15616
15723
|
if (/-/.test(
|
15617
15724
|
/*element*/
|
15618
|
-
ctx[
|
15725
|
+
ctx[5]
|
15619
15726
|
)) set_custom_element_data_map(svelte_element, svelte_element_data);
|
15620
15727
|
else set_attributes(svelte_element, svelte_element_data);
|
15621
15728
|
toggle_class(svelte_element, "svelte-1olvu11", true);
|
@@ -15628,7 +15735,7 @@ function create_dynamic_element$5(ctx) {
|
|
15628
15735
|
svelte_element,
|
15629
15736
|
"click",
|
15630
15737
|
/*handleClick*/
|
15631
|
-
ctx[
|
15738
|
+
ctx[6]
|
15632
15739
|
);
|
15633
15740
|
mounted = true;
|
15634
15741
|
}
|
@@ -15636,15 +15743,21 @@ function create_dynamic_element$5(ctx) {
|
|
15636
15743
|
p(ctx$1, dirty) {
|
15637
15744
|
if (dirty & 1 && !src_url_equal(img.src, img_src_value = ctx$1[0].image)) attr(img, "src", img_src_value);
|
15638
15745
|
if (dirty & 1 && img_alt_value !== (img_alt_value = ctx$1[0].alt)) attr(img, "alt", img_alt_value);
|
15746
|
+
if (dirty & 4) attr(
|
15747
|
+
img,
|
15748
|
+
"style",
|
15749
|
+
/*imgStyle*/
|
15750
|
+
ctx$1[2]
|
15751
|
+
);
|
15639
15752
|
svelte_element_data = get_spread_update(svelte_element_levels, [
|
15640
|
-
ctx$1[
|
15753
|
+
ctx$1[4],
|
15641
15754
|
{ class: "image" },
|
15642
|
-
dirty &
|
15755
|
+
dirty & 8 && { style: ctx$1[3] },
|
15643
15756
|
dirty & 2 && { "data-layer-id": ctx$1[1] }
|
15644
15757
|
]);
|
15645
15758
|
if (/-/.test(
|
15646
15759
|
/*element*/
|
15647
|
-
ctx$1[
|
15760
|
+
ctx$1[5]
|
15648
15761
|
)) set_custom_element_data_map(svelte_element, svelte_element_data);
|
15649
15762
|
else set_attributes(svelte_element, svelte_element_data);
|
15650
15763
|
toggle_class(svelte_element, "svelte-1olvu11", true);
|
@@ -15657,9 +15770,9 @@ function create_dynamic_element$5(ctx) {
|
|
15657
15770
|
};
|
15658
15771
|
}
|
15659
15772
|
function create_fragment$21(ctx) {
|
15660
|
-
let previous_tag = ctx[
|
15773
|
+
let previous_tag = ctx[5];
|
15661
15774
|
let svelte_element_anchor;
|
15662
|
-
let svelte_element = ctx[
|
15775
|
+
let svelte_element = ctx[5] && create_dynamic_element$5(ctx);
|
15663
15776
|
return {
|
15664
15777
|
c() {
|
15665
15778
|
if (svelte_element) svelte_element.c();
|
@@ -15670,14 +15783,14 @@ function create_fragment$21(ctx) {
|
|
15670
15783
|
insert(target, svelte_element_anchor, anchor);
|
15671
15784
|
},
|
15672
15785
|
p(ctx$1, [dirty]) {
|
15673
|
-
if (ctx$1[
|
15786
|
+
if (ctx$1[5]) if (!previous_tag) {
|
15674
15787
|
svelte_element = create_dynamic_element$5(ctx$1);
|
15675
15788
|
svelte_element.c();
|
15676
15789
|
svelte_element.m(svelte_element_anchor.parentNode, svelte_element_anchor);
|
15677
15790
|
} else if (safe_not_equal(
|
15678
15791
|
previous_tag,
|
15679
15792
|
/*element*/
|
15680
|
-
ctx$1[
|
15793
|
+
ctx$1[5]
|
15681
15794
|
)) {
|
15682
15795
|
svelte_element.d(1);
|
15683
15796
|
svelte_element = create_dynamic_element$5(ctx$1);
|
@@ -15688,7 +15801,7 @@ function create_fragment$21(ctx) {
|
|
15688
15801
|
svelte_element.d(1);
|
15689
15802
|
svelte_element = null;
|
15690
15803
|
}
|
15691
|
-
previous_tag = ctx$1[
|
15804
|
+
previous_tag = ctx$1[5];
|
15692
15805
|
},
|
15693
15806
|
i: noop,
|
15694
15807
|
o: noop,
|
@@ -15699,35 +15812,53 @@ function create_fragment$21(ctx) {
|
|
15699
15812
|
};
|
15700
15813
|
}
|
15701
15814
|
function instance$21($$self, $$props, $$invalidate) {
|
15815
|
+
let styleObj;
|
15702
15816
|
let style;
|
15817
|
+
let imgStyle;
|
15703
15818
|
let { props = {} } = $$props;
|
15704
15819
|
let { layerId = "" } = $$props;
|
15705
15820
|
useInjectCustomizeCss(props);
|
15706
15821
|
const { attributes, element: element$1, handleClick } = useClickable_default(props);
|
15707
15822
|
const aspectVariantStyles = ASPECT_VARIANT[props.aspectVariant]?.getProps();
|
15708
15823
|
const width = props.width ?? "100%";
|
15824
|
+
const calcImgRadius = (parentRadius, borderWidth) => {
|
15825
|
+
const radiusSize = parentRadius ? parseInt(parentRadius) : 0;
|
15826
|
+
if (radiusSize === 0) return 0;
|
15827
|
+
if (parentRadius === "100%") return "100%";
|
15828
|
+
return radiusSize > 0 ? `calc(${parentRadius} - ${borderWidth})` : void 0;
|
15829
|
+
};
|
15709
15830
|
$$self.$$set = ($$props$1) => {
|
15710
15831
|
if ("props" in $$props$1) $$invalidate(0, props = $$props$1.props);
|
15711
15832
|
if ("layerId" in $$props$1) $$invalidate(1, layerId = $$props$1.layerId);
|
15712
15833
|
};
|
15713
15834
|
$$self.$$.update = () => {
|
15714
|
-
if ($$self.$$.dirty & 1) $: $$invalidate(
|
15835
|
+
if ($$self.$$.dirty & 1) $: $$invalidate(7, styleObj = {
|
15715
15836
|
...props.borderTopLeftRadius ? toCssRadius(props) : IMAGE_ROUND_STYLES[props.shape ?? "square"],
|
15716
15837
|
width,
|
15717
15838
|
flexShrink: String(width).indexOf("px") !== -1 ? 0 : 1,
|
15718
15839
|
height: props.height ?? "auto",
|
15719
15840
|
aspectRatio: props.aspect ?? aspectVariantStyles?.aspect,
|
15720
15841
|
...toCssCommon(props),
|
15721
|
-
...toCssBorder(props)
|
15722
|
-
|
15842
|
+
...toCssBorder(props),
|
15843
|
+
...toCssPadding(props)
|
15844
|
+
});
|
15845
|
+
if ($$self.$$.dirty & 128) $: $$invalidate(3, style = objToStyle(styleObj));
|
15846
|
+
if ($$self.$$.dirty & 128) $: $$invalidate(2, imgStyle = objToStyle({ ...toCssRadius({
|
15847
|
+
borderTopLeftRadius: calcImgRadius(styleObj.borderTopLeftRadius, styleObj.borderTopWidth),
|
15848
|
+
borderTopRightRadius: calcImgRadius(styleObj.borderTopRightRadius, styleObj.borderTopWidth),
|
15849
|
+
borderBottomLeftRadius: calcImgRadius(styleObj.borderBottomLeftRadius, styleObj.borderTopWidth),
|
15850
|
+
borderBottomRightRadius: calcImgRadius(styleObj.borderBottomRightRadius, styleObj.borderTopWidth)
|
15851
|
+
}) }));
|
15723
15852
|
};
|
15724
15853
|
return [
|
15725
15854
|
props,
|
15726
15855
|
layerId,
|
15856
|
+
imgStyle,
|
15727
15857
|
style,
|
15728
15858
|
attributes,
|
15729
15859
|
element$1,
|
15730
|
-
handleClick
|
15860
|
+
handleClick,
|
15861
|
+
styleObj
|
15731
15862
|
];
|
15732
15863
|
}
|
15733
15864
|
var Image = class extends SvelteComponent {
|
@@ -15905,6 +16036,7 @@ function instance$20($$self, $$props, $$invalidate) {
|
|
15905
16036
|
let { $$slots: slots = {}, $$scope } = $$props;
|
15906
16037
|
let { props = {} } = $$props;
|
15907
16038
|
let { layerId = "" } = $$props;
|
16039
|
+
const { brandKit } = useBrandKit();
|
15908
16040
|
useInjectCustomizeCss(props);
|
15909
16041
|
const { attributes, element: element$1, handleClick } = useClickable_default(props);
|
15910
16042
|
$$self.$$set = ($$props$1) => {
|
@@ -15921,13 +16053,14 @@ function instance$20($$self, $$props, $$invalidate) {
|
|
15921
16053
|
rowGap: props.rowGap ?? props.gap,
|
15922
16054
|
columnGap: props.columnGap ?? props.gap,
|
15923
16055
|
width: props.width,
|
16056
|
+
height: props.height,
|
15924
16057
|
...toCssOverflow(props),
|
15925
16058
|
...toCssShadow(props),
|
15926
16059
|
...toCssRadius(props),
|
15927
|
-
...toCssBackground(props),
|
16060
|
+
...toCssBackground(props, brandKit),
|
15928
16061
|
...toCssCommon(props),
|
15929
16062
|
...toCssPadding(props),
|
15930
|
-
...toCssBorder(props)
|
16063
|
+
...toCssBorder(props, brandKit)
|
15931
16064
|
}));
|
15932
16065
|
};
|
15933
16066
|
return [
|
@@ -16581,20 +16714,6 @@ var SliderItem = class extends SvelteComponent {
|
|
16581
16714
|
};
|
16582
16715
|
var SliderItem_default = SliderItem;
|
16583
16716
|
|
16584
|
-
//#endregion
|
16585
|
-
//#region src/components-flex/text/styles.ts
|
16586
|
-
const callback$1 = ({ brandKit }) => ({
|
16587
|
-
default: { color: brandKit.color_text_primary },
|
16588
|
-
gray: { color: brandKit.color_text_secondary },
|
16589
|
-
brand: { color: brandKit.color_brand },
|
16590
|
-
success: { color: brandKit.color_success },
|
16591
|
-
warning: { color: brandKit.color_warning },
|
16592
|
-
danger: { color: brandKit.color_danger },
|
16593
|
-
info: { color: brandKit.color_info },
|
16594
|
-
white: { color: brandKit.color_white }
|
16595
|
-
});
|
16596
|
-
const getTextThemeStyles = getPropStyles(callback$1);
|
16597
|
-
|
16598
16717
|
//#endregion
|
16599
16718
|
//#region src/components-flex/text/constants.ts
|
16600
16719
|
const TEXT_VARIANTS = { size: {
|
@@ -18018,11 +18137,9 @@ function instance$11($$self, $$props, $$invalidate) {
|
|
18018
18137
|
let { $$slots: slots = {}, $$scope } = $$props;
|
18019
18138
|
let { layerId } = $$props;
|
18020
18139
|
let { props } = $$props;
|
18140
|
+
const { brandKit } = useBrandKit();
|
18021
18141
|
useInjectCustomizeCss(props);
|
18022
18142
|
const vars = getVariables();
|
18023
|
-
console.log(vars);
|
18024
|
-
console.log(props.actionTableKey);
|
18025
|
-
console.log(vars[props.actionTableKey]);
|
18026
18143
|
setContext(LIST_ITEM_CONTEXT_KEY, {
|
18027
18144
|
paddingTop: props.itemPaddingTop,
|
18028
18145
|
paddingLeft: props.itemPaddingLeft,
|
@@ -18030,8 +18147,8 @@ function instance$11($$self, $$props, $$invalidate) {
|
|
18030
18147
|
paddingBottom: props.itemPaddingBottom,
|
18031
18148
|
height: props.itemHeight,
|
18032
18149
|
borderTopWidth: props.borderWidth,
|
18033
|
-
borderTopColor: props.borderColor,
|
18034
|
-
borderTopStyle:
|
18150
|
+
borderTopColor: props.borderColor ?? BORDER_COLOR_VARIANT[props.borderColorVariant]?.getProps(brandKit)?.borderColor,
|
18151
|
+
borderTopStyle: "solid",
|
18035
18152
|
gap: props.itemGap
|
18036
18153
|
});
|
18037
18154
|
$$self.$$set = ($$props$1) => {
|
@@ -18426,6 +18543,7 @@ function instance$9($$self, $$props, $$invalidate) {
|
|
18426
18543
|
let { $$slots: slots = {}, $$scope } = $$props;
|
18427
18544
|
let { layerId } = $$props;
|
18428
18545
|
let { props } = $$props;
|
18546
|
+
const { brandKit } = useBrandKit();
|
18429
18547
|
useInjectCustomizeCss(props);
|
18430
18548
|
let listGap = (() => {
|
18431
18549
|
if (!props.gap) return "0";
|
@@ -18443,8 +18561,8 @@ function instance$9($$self, $$props, $$invalidate) {
|
|
18443
18561
|
paddingRight: props.itemPaddingRight,
|
18444
18562
|
paddingBottom: props.itemPaddingBottom,
|
18445
18563
|
borderLeftWidth: props.borderWidth,
|
18446
|
-
borderLeftColor: props.borderColor,
|
18447
|
-
borderLeftStyle: props.borderStyle,
|
18564
|
+
borderLeftColor: props.borderColor ?? BORDER_COLOR_VARIANT[props.borderColorVariant]?.getProps(brandKit)?.borderColor,
|
18565
|
+
borderLeftStyle: props.borderStyle ?? "solid",
|
18448
18566
|
gap: listGap,
|
18449
18567
|
innerGap: props.itemGap
|
18450
18568
|
});
|
@@ -19888,6 +20006,10 @@ __export(index_svelte5_exports, {
|
|
19888
20006
|
AVATAR_SIZE_STYLES: () => AVATAR_SIZE_STYLES,
|
19889
20007
|
Alignments: () => Alignments,
|
19890
20008
|
AnimationStyles: () => AnimationStyles,
|
20009
|
+
BACKGROUND_COLOR_VARIANT: () => BACKGROUND_COLOR_VARIANT,
|
20010
|
+
BACKGROUND_COLOR_VARIANTS: () => BACKGROUND_COLOR_VARIANTS,
|
20011
|
+
BORDER_COLOR_VARIANT: () => BORDER_COLOR_VARIANT,
|
20012
|
+
BORDER_COLOR_VARIANTS: () => BORDER_COLOR_VARIANTS,
|
19891
20013
|
BUTTON_ICON_ANGLE: () => BUTTON_ICON_ANGLE,
|
19892
20014
|
BUTTON_LINK_TARGET: () => BUTTON_LINK_TARGET,
|
19893
20015
|
BUTTON_OUTLINED_ROUND_STYLES: () => BUTTON_OUTLINED_ROUND_STYLES,
|
@@ -20369,4 +20491,4 @@ var ThumbnailPreview = class extends SvelteComponent {
|
|
20369
20491
|
var ThumbnailPreview_default = ThumbnailPreview;
|
20370
20492
|
|
20371
20493
|
//#endregion
|
20372
|
-
export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, Box_default as Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement_default as CodeElement, Countdown_default as Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement_default as EmbedElement, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, Flex_default as Flex, Avatar_default as FlexAvatar, Button_default as FlexButton, ButtonOutlined_default as FlexButtonOutlined, ButtonText_default as FlexButtonText, ClipCopy_default as FlexClipCopy, CloseButton_default as FlexCloseButton, Code_default as FlexCode, CountDown_default as FlexCountDown, CountDownValue_default as FlexCountDownValue, FlexDirections, Icon_default as FlexIcon, Image_default as FlexImage, FlexItem_default as FlexItem, Layout_default as FlexLayout, List_default as FlexList, ListItem_default as FlexListItem, Modal_default as FlexModal, MultiColumn_default as FlexMultiColumn, MultiColumnItem_default as FlexMultiColumnItem, RichText_default as FlexRichText, Slider_default as FlexSlider, SliderItem_default as FlexSliderItem, Text_default as FlexText, TextLink_default as FlexTextLink, Youtube_default as FlexYoutube, Fonts, FormCheckBoxes_default as FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices_default as FormIdentifyChoices, FormIdentifyInput_default as FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons_default as FormRadioButtons, FormRatingButtonsFace_default as FormRatingButtonsFace, FormRatingButtonsNumber_default as FormRatingButtonsNumber, FormSelect_default as FormSelect, FormTextarea_default as FormTextarea, Grid_default as Grid, GridItem_default as GridItem, GridModalState_default as GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement_default as IconElement, ImageBlock_default as ImageBlock, ImageElement_default as ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, List_default$1 as List, ListBackgroundTypes, ListDirections, ListItem_default$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal_default$1 as Modal, ModalPositions, MovieVimeoElement_default as MovieVimeoElement, MovieYouTubeElement_default as MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide_default as Slide, SlideItem_default as SlideItem, State_default as State, StateItem_default as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock_default as TextBlock, TextButtonBlock_default as TextButtonBlock, TextButtonElement_default as TextButtonElement, TextDirections, TextElement_default as TextElement, ThumbnailPreview_default as ThumbnailPreview, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget_exports as widget };
|
20494
|
+
export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BACKGROUND_COLOR_VARIANT, BACKGROUND_COLOR_VARIANTS, BORDER_COLOR_VARIANT, BORDER_COLOR_VARIANTS, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, Box_default as Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement_default as CodeElement, Countdown_default as Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement_default as EmbedElement, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, Flex_default as Flex, Avatar_default as FlexAvatar, Button_default as FlexButton, ButtonOutlined_default as FlexButtonOutlined, ButtonText_default as FlexButtonText, ClipCopy_default as FlexClipCopy, CloseButton_default as FlexCloseButton, Code_default as FlexCode, CountDown_default as FlexCountDown, CountDownValue_default as FlexCountDownValue, FlexDirections, Icon_default as FlexIcon, Image_default as FlexImage, FlexItem_default as FlexItem, Layout_default as FlexLayout, List_default as FlexList, ListItem_default as FlexListItem, Modal_default as FlexModal, MultiColumn_default as FlexMultiColumn, MultiColumnItem_default as FlexMultiColumnItem, RichText_default as FlexRichText, Slider_default as FlexSlider, SliderItem_default as FlexSliderItem, Text_default as FlexText, TextLink_default as FlexTextLink, Youtube_default as FlexYoutube, Fonts, FormCheckBoxes_default as FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices_default as FormIdentifyChoices, FormIdentifyInput_default as FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons_default as FormRadioButtons, FormRatingButtonsFace_default as FormRatingButtonsFace, FormRatingButtonsNumber_default as FormRatingButtonsNumber, FormSelect_default as FormSelect, FormTextarea_default as FormTextarea, Grid_default as Grid, GridItem_default as GridItem, GridModalState_default as GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement_default as IconElement, ImageBlock_default as ImageBlock, ImageElement_default as ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, List_default$1 as List, ListBackgroundTypes, ListDirections, ListItem_default$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal_default$1 as Modal, ModalPositions, MovieVimeoElement_default as MovieVimeoElement, MovieYouTubeElement_default as MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide_default as Slide, SlideItem_default as SlideItem, State_default as State, StateItem_default as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock_default as TextBlock, TextButtonBlock_default as TextButtonBlock, TextButtonElement_default as TextButtonElement, TextDirections, TextElement_default as TextElement, ThumbnailPreview_default as ThumbnailPreview, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, avatarPropsDefault, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget_exports as widget };
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import type { BorderProps, ClickableProps, CommonProps } from "../props.js";
|
1
|
+
import type { BorderProps, ClickableProps, CommonProps, PaddingProps } from "../props.js";
|
2
2
|
import type { Properties } from "csstype";
|
3
3
|
export declare const AVATAR_SIZE: {
|
4
4
|
readonly extra_small: "XS(48 x 48)"
|
@@ -12,7 +12,7 @@ export declare const AVATAR_SHAPE: {
|
|
12
12
|
readonly square: "スクエア"
|
13
13
|
readonly rounded: "ラウンド"
|
14
14
|
};
|
15
|
-
export type AvatarProps = CommonProps & ClickableProps & BorderProps & {
|
15
|
+
export type AvatarProps = CommonProps & ClickableProps & PaddingProps & BorderProps & {
|
16
16
|
size?: keyof typeof AVATAR_SIZE | number
|
17
17
|
width?: Properties["width"]
|
18
18
|
height?: Properties["height"]
|
@@ -1,5 +1,6 @@
|
|
1
|
-
import type { BorderProps, ClickableProps, CommonProps } from "../props.js";
|
1
|
+
import type { BorderProps, ClickableProps, CommonProps, BackgroundColorProps, ColorProps, PaddingProps } from "../props.js";
|
2
2
|
import type { Properties } from "csstype";
|
3
|
+
import type { TEXT_THEME } from "../text/types.js";
|
3
4
|
export declare const CLOSE_BUTTON_PLACEMENT: {
|
4
5
|
readonly topRight: "topRight"
|
5
6
|
readonly topLeft: "topLeft"
|
@@ -15,15 +16,14 @@ export declare const CLOSE_BUTTON_LABEL_PLACEMENT: {
|
|
15
16
|
readonly right: "right"
|
16
17
|
readonly left: "left"
|
17
18
|
};
|
18
|
-
export type CloseButtonProps = CommonProps & ClickableProps & BorderProps & {
|
19
|
+
export type CloseButtonProps = CommonProps & BackgroundColorProps & ClickableProps & ColorProps & PaddingProps & BorderProps & {
|
19
20
|
size?: number
|
20
21
|
placement?: keyof typeof CLOSE_BUTTON_PLACEMENT
|
21
22
|
round?: keyof typeof CLOSE_BUTTON_ROUND
|
22
23
|
bordered?: boolean
|
23
|
-
color?: Properties["color"]
|
24
|
-
backgroundColor?: Properties["backgroundColor"]
|
25
24
|
label?: string
|
26
25
|
labelColor?: Properties["color"]
|
26
|
+
labelColorVariant?: keyof typeof TEXT_THEME
|
27
27
|
labelPlacement?: keyof typeof CLOSE_BUTTON_LABEL_PLACEMENT
|
28
28
|
top?: Properties["top"]
|
29
29
|
right?: Properties["right"]
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Properties } from "csstype";
|
2
|
-
import type { CommonProps, BorderProps, ClickableProps, AspectProps, RadiusProps } from "../props.js";
|
2
|
+
import type { CommonProps, BorderProps, ClickableProps, AspectProps, RadiusProps, PaddingProps } from "../props.js";
|
3
3
|
export declare const IMAGE_ROUND_SHAPE: {
|
4
4
|
readonly circle: "ラウンド / ミディアム"
|
5
5
|
readonly rounded: "ラウンド / スモール"
|
@@ -17,7 +17,7 @@ export declare const IMAGE_ASPECT_VARIANTS: {
|
|
17
17
|
"3/4": string
|
18
18
|
"9/16": string
|
19
19
|
};
|
20
|
-
export type ImageProps = CommonProps & ClickableProps & AspectProps & RadiusProps & BorderProps & {
|
20
|
+
export type ImageProps = CommonProps & ClickableProps & AspectProps & RadiusProps & PaddingProps & BorderProps & {
|
21
21
|
image?: string
|
22
22
|
width?: Properties["width"]
|
23
23
|
height?: Properties["height"]
|