@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
@@ -3164,6 +3164,52 @@ const SHADOW_VARIANT = {
|
|
3164
3164
|
}
|
3165
3165
|
};
|
3166
3166
|
const SHADOW_VARIANTS = toVariantArray(SHADOW_VARIANT);
|
3167
|
+
const BACKGROUND_COLOR_VARIANT = {
|
3168
|
+
base: {
|
3169
|
+
name: "ホワイト",
|
3170
|
+
getProps: () => ({ backgroundColor: "#FFFFFF" })
|
3171
|
+
},
|
3172
|
+
dark: {
|
3173
|
+
name: "ブラック",
|
3174
|
+
getProps: () => ({ backgroundColor: "#000000" })
|
3175
|
+
},
|
3176
|
+
gray: {
|
3177
|
+
name: "グレー",
|
3178
|
+
getProps: () => ({ backgroundColor: "#ECECEC" })
|
3179
|
+
},
|
3180
|
+
brand: {
|
3181
|
+
name: "ブランド",
|
3182
|
+
getProps: (kit) => ({ backgroundColor: getBrandKit(kit).color_brand })
|
3183
|
+
},
|
3184
|
+
danger: {
|
3185
|
+
name: "デンジャー",
|
3186
|
+
getProps: (kit) => ({ backgroundColor: getBrandKit(kit).color_danger })
|
3187
|
+
}
|
3188
|
+
};
|
3189
|
+
const BACKGROUND_COLOR_VARIANTS = toVariantArray(BACKGROUND_COLOR_VARIANT);
|
3190
|
+
const BORDER_COLOR_VARIANT = {
|
3191
|
+
black: {
|
3192
|
+
name: "ブラック",
|
3193
|
+
getProps: () => ({ borderColor: "#000000" })
|
3194
|
+
},
|
3195
|
+
gray: {
|
3196
|
+
name: "グレー",
|
3197
|
+
getProps: () => ({ borderColor: "#DBDBDB" })
|
3198
|
+
},
|
3199
|
+
brand: {
|
3200
|
+
name: "ブランド",
|
3201
|
+
getProps: (kit) => ({ borderColor: getBrandKit(kit).color_brand })
|
3202
|
+
},
|
3203
|
+
danger: {
|
3204
|
+
name: "デンジャー",
|
3205
|
+
getProps: (kit) => ({ borderColor: getBrandKit(kit).color_danger })
|
3206
|
+
},
|
3207
|
+
base: {
|
3208
|
+
name: "ホワイト",
|
3209
|
+
getProps: () => ({ borderColor: "#FFFFFF" })
|
3210
|
+
}
|
3211
|
+
};
|
3212
|
+
const BORDER_COLOR_VARIANTS = toVariantArray(BORDER_COLOR_VARIANT);
|
3167
3213
|
|
3168
3214
|
//#endregion
|
3169
3215
|
//#region src/components-flex/utils/prop-to-style.ts
|
@@ -3180,11 +3226,12 @@ const toCssPosition = (p) => {
|
|
3180
3226
|
const toCssCommon = (p) => {
|
3181
3227
|
return { ...toCssPosition(p) };
|
3182
3228
|
};
|
3183
|
-
const toCssBorder = (p) => {
|
3229
|
+
const toCssBorder = (p, brandKit) => {
|
3184
3230
|
const borderWidth = p?.borderTopWidth ?? p?.borderRightWidth ?? p?.borderLeftWidth ?? p?.borderBottomWidth ?? null;
|
3185
3231
|
if (borderWidth === null) return {};
|
3232
|
+
const variant = BORDER_COLOR_VARIANT[p?.borderColorVariant];
|
3186
3233
|
return {
|
3187
|
-
borderColor: p?.borderColor,
|
3234
|
+
borderColor: p?.borderColor ?? variant?.getProps(brandKit)?.borderColor,
|
3188
3235
|
borderStyle: "solid",
|
3189
3236
|
borderTopWidth: p?.borderTopWidth,
|
3190
3237
|
borderLeftWidth: p?.borderLeftWidth,
|
@@ -3200,16 +3247,19 @@ const toCssPadding = (p) => {
|
|
3200
3247
|
paddingBottom: p?.paddingBottom
|
3201
3248
|
};
|
3202
3249
|
};
|
3203
|
-
const toCssBackground = (p) => {
|
3250
|
+
const toCssBackground = (p, brandKit) => {
|
3204
3251
|
const url = p?.backgroundImageUrl;
|
3252
|
+
const variant = BACKGROUND_COLOR_VARIANT[p?.backgroundColorVariant];
|
3205
3253
|
return {
|
3206
|
-
|
3207
|
-
|
3208
|
-
|
3209
|
-
|
3210
|
-
|
3211
|
-
|
3212
|
-
|
3254
|
+
backgroundColor: p?.backgroundBlendColor ?? p?.backgroundColor ?? variant?.getProps(brandKit)?.backgroundColor,
|
3255
|
+
...url ? {
|
3256
|
+
backgroundSize: url ? "cover" : void 0,
|
3257
|
+
backgroundImage: url ? `url(${url})` : void 0,
|
3258
|
+
backgroundPositionX: p?.backgroundPositionX ?? "center",
|
3259
|
+
backgroundPositionY: p?.backgroundPositionY ?? "center",
|
3260
|
+
backgroundBlendMode: p?.backgroundBlendMode,
|
3261
|
+
backgroundRepeat: "no-repeat"
|
3262
|
+
} : {}
|
3213
3263
|
};
|
3214
3264
|
};
|
3215
3265
|
const toCssRadius = (p) => {
|
@@ -3492,6 +3542,7 @@ const $$css$22 = {
|
|
3492
3542
|
function Avatar($$anchor, $$props) {
|
3493
3543
|
$$55.push($$props, false);
|
3494
3544
|
$$55.append_styles($$anchor, $$css$22);
|
3545
|
+
const styleObj = $$55.mutable_state();
|
3495
3546
|
const style = $$55.mutable_state();
|
3496
3547
|
const imgStyle = $$55.mutable_state();
|
3497
3548
|
let props = $$55.prop($$props, "props", 24, () => ({}));
|
@@ -3507,20 +3558,36 @@ function Avatar($$anchor, $$props) {
|
|
3507
3558
|
square: { borderRadius: "0.25em" },
|
3508
3559
|
rounded: { borderRadius: "1em" }
|
3509
3560
|
} };
|
3510
|
-
|
3511
|
-
|
3561
|
+
const calcImgRadius = (parentRadius, borderWidth) => {
|
3562
|
+
const radiusSize = parentRadius ? parseInt(parentRadius) : 0;
|
3563
|
+
if (radiusSize === 0) return 0;
|
3564
|
+
if (parentRadius === "100%") return "100%";
|
3565
|
+
return radiusSize > 0 ? `calc(${parentRadius} - ${borderWidth})` : void 0;
|
3566
|
+
};
|
3567
|
+
$$55.legacy_pre_effect(() => ($$55.deep_read_state(props()), toCssPadding), () => {
|
3568
|
+
$$55.set(styleObj, {
|
3512
3569
|
...VARIANTS.shape[props().shape ?? "square"],
|
3513
3570
|
width: props().width ?? avatarSizeStyle.width,
|
3514
3571
|
height: props().height ?? avatarSizeStyle.height,
|
3515
3572
|
...toCssCommon(props()),
|
3516
|
-
...toCssBorder(props())
|
3517
|
-
|
3573
|
+
...toCssBorder(props()),
|
3574
|
+
...toCssPadding(props())
|
3575
|
+
});
|
3518
3576
|
});
|
3519
|
-
$$55.legacy_pre_effect(() =>
|
3577
|
+
$$55.legacy_pre_effect(() => $$55.get(styleObj), () => {
|
3578
|
+
$$55.set(style, objToStyle($$55.get(styleObj)));
|
3579
|
+
});
|
3580
|
+
$$55.legacy_pre_effect(() => $$55.get(styleObj), () => {
|
3520
3581
|
$$55.set(imgStyle, objToStyle({
|
3521
3582
|
width: "100%",
|
3522
3583
|
height: "100%",
|
3523
|
-
objectFit: "cover"
|
3584
|
+
objectFit: "cover",
|
3585
|
+
...toCssRadius({
|
3586
|
+
borderTopLeftRadius: calcImgRadius($$55.get(styleObj).borderRadius, $$55.get(styleObj).borderTopWidth),
|
3587
|
+
borderTopRightRadius: calcImgRadius($$55.get(styleObj).borderRadius, $$55.get(styleObj).borderTopWidth),
|
3588
|
+
borderBottomLeftRadius: calcImgRadius($$55.get(styleObj).borderRadius, $$55.get(styleObj).borderTopWidth),
|
3589
|
+
borderBottomRightRadius: calcImgRadius($$55.get(styleObj).borderRadius, $$55.get(styleObj).borderTopWidth)
|
3590
|
+
})
|
3524
3591
|
}));
|
3525
3592
|
});
|
3526
3593
|
$$55.legacy_pre_effect_reset();
|
@@ -4728,25 +4795,43 @@ const BUTTON_TEXT_THEME = {
|
|
4728
4795
|
white: "White"
|
4729
4796
|
};
|
4730
4797
|
|
4798
|
+
//#endregion
|
4799
|
+
//#region src/components-flex/text/styles.ts
|
4800
|
+
const callback$1 = ({ brandKit }) => ({
|
4801
|
+
default: { color: brandKit.color_text_primary },
|
4802
|
+
gray: { color: brandKit.color_text_secondary },
|
4803
|
+
brand: { color: brandKit.color_brand },
|
4804
|
+
success: { color: brandKit.color_success },
|
4805
|
+
warning: { color: brandKit.color_warning },
|
4806
|
+
danger: { color: brandKit.color_danger },
|
4807
|
+
info: { color: brandKit.color_info },
|
4808
|
+
white: { color: brandKit.color_white }
|
4809
|
+
});
|
4810
|
+
const getTextThemeStyles = getPropStyles(callback$1);
|
4811
|
+
|
4731
4812
|
//#endregion
|
4732
4813
|
//#region src/components-flex/close-button/CloseButton.svelte
|
4733
4814
|
var root_2$1 = $$19.template(`<span></span>`);
|
4734
|
-
var root_1$4 = $$19.template(`<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 100%; height: 100%;" class="svelte-
|
4815
|
+
var root_1$4 = $$19.template(`<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" style="width: 100%; height: 100%;" class="svelte-18wmfyq"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path></svg></span> <!>`, 1);
|
4735
4816
|
const $$css$17 = {
|
4736
|
-
hash: "svelte-
|
4737
|
-
code: ".close-button.svelte-
|
4817
|
+
hash: "svelte-18wmfyq",
|
4818
|
+
code: ".close-button.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:where(.svelte-18wmfyq) {transition:transform 0.12s;}.close-button.svelte-18wmfyq:hover svg:where(.svelte-18wmfyq) {transform:rotate(90deg);}.close-button-order-one.svelte-18wmfyq {order:1;}.close-button-order-two.svelte-18wmfyq {order:2;}"
|
4738
4819
|
};
|
4739
4820
|
function CloseButton($$anchor, $$props) {
|
4740
4821
|
$$19.push($$props, false);
|
4741
4822
|
$$19.append_styles($$anchor, $$css$17);
|
4742
4823
|
const hasLabel = $$19.mutable_state();
|
4824
|
+
const styleObj = $$19.mutable_state();
|
4743
4825
|
const style = $$19.mutable_state();
|
4826
|
+
const borderWidth = $$19.mutable_state();
|
4827
|
+
const paddingSize = $$19.mutable_state();
|
4744
4828
|
const labelStyle = $$19.mutable_state();
|
4745
4829
|
const iconStyle = $$19.mutable_state();
|
4746
4830
|
let props = $$19.prop($$props, "props", 24, () => ({}));
|
4747
4831
|
let layerId = $$19.prop($$props, "layerId", 8, "");
|
4748
4832
|
let eventName = $$19.prop($$props, "eventName", 8, "");
|
4749
4833
|
let eventValue = $$19.prop($$props, "eventValue", 8, void 0);
|
4834
|
+
const { brandKit } = useBrandKit();
|
4750
4835
|
useInjectCustomizeCss(props());
|
4751
4836
|
const { attributes, element, handleClick } = useClickable_default({
|
4752
4837
|
onClick: {
|
@@ -4782,34 +4867,54 @@ function CloseButton($$anchor, $$props) {
|
|
4782
4867
|
}
|
4783
4868
|
};
|
4784
4869
|
const size = props().size ?? 24;
|
4785
|
-
const color = props().color ?? "#666";
|
4870
|
+
const color = props().color ?? getTextThemeStyles(brandKit)[props().colorVariant]?.color ?? "#666";
|
4786
4871
|
const label = props().label;
|
4787
4872
|
const isLeftLabelPlacement = props().labelPlacement === "left";
|
4788
4873
|
$$19.legacy_pre_effect(() => {}, () => {
|
4789
4874
|
$$19.set(hasLabel, label !== void 0 && label !== "");
|
4790
4875
|
});
|
4791
4876
|
$$19.legacy_pre_effect(() => ($$19.deep_read_state(props()), toCssBorder), () => {
|
4792
|
-
$$19.set(
|
4793
|
-
...props().bordered && {
|
4794
|
-
|
4795
|
-
|
4877
|
+
$$19.set(styleObj, {
|
4878
|
+
...props().bordered && {
|
4879
|
+
borderTopWidth: "1px",
|
4880
|
+
borderLeftWidth: "1px",
|
4881
|
+
borderRightWidth: "1px",
|
4882
|
+
borderBottomWidth: "1px",
|
4883
|
+
borderStyle: "solid",
|
4884
|
+
borderColor: "#666666"
|
4885
|
+
},
|
4796
4886
|
padding: "6px",
|
4797
|
-
|
4887
|
+
boxSizing: "border-box",
|
4888
|
+
backgroundColor: toCssBackground(props(), brandKit)?.backgroundColor ?? "rgba(255,255,255,0)",
|
4798
4889
|
...VARIANTS.round[props().round ?? "default"],
|
4890
|
+
...toCssPadding(props()),
|
4799
4891
|
...toCssCommon(props()),
|
4800
4892
|
...toCssBorder(props())
|
4801
|
-
})
|
4893
|
+
});
|
4802
4894
|
});
|
4803
|
-
$$19.legacy_pre_effect(() => $$19.
|
4895
|
+
$$19.legacy_pre_effect(() => $$19.get(styleObj), () => {
|
4896
|
+
$$19.set(style, objToStyle($$19.get(styleObj)));
|
4897
|
+
});
|
4898
|
+
$$19.legacy_pre_effect(() => $$19.get(styleObj), () => {
|
4899
|
+
$$19.set(borderWidth, $$19.get(styleObj).borderTopWidth ? parseInt($$19.get(styleObj).borderTopWidth) : 0);
|
4900
|
+
});
|
4901
|
+
$$19.legacy_pre_effect(() => $$19.get(styleObj), () => {
|
4902
|
+
$$19.set(paddingSize, $$19.get(styleObj).paddingTop ? parseInt($$19.get(styleObj).paddingTop) : 6);
|
4903
|
+
});
|
4904
|
+
$$19.legacy_pre_effect(() => ($$19.deep_read_state(props()), getTextThemeStyles), () => {
|
4804
4905
|
$$19.set(labelStyle, objToStyle({
|
4805
|
-
color: props().labelColor ?? color,
|
4906
|
+
color: props().labelColor ?? getTextThemeStyles(brandKit)[props().labelColorVariant]?.color ?? color,
|
4806
4907
|
fontSize: `${size / 2.1}px`
|
4807
4908
|
}));
|
4808
4909
|
});
|
4809
|
-
$$19.legacy_pre_effect(() =>
|
4910
|
+
$$19.legacy_pre_effect(() => ($$19.get(paddingSize), $$19.get(borderWidth)), () => {
|
4810
4911
|
$$19.set(iconStyle, objToStyle({
|
4811
|
-
width: `${size -
|
4812
|
-
height: `${size -
|
4912
|
+
width: `${size - $$19.get(paddingSize) * 2 - $$19.get(borderWidth) * 2}px`,
|
4913
|
+
height: `${size - $$19.get(paddingSize) * 2 - $$19.get(borderWidth) * 2}px`,
|
4914
|
+
display: "flex",
|
4915
|
+
alignItems: "center",
|
4916
|
+
justifyContent: "center",
|
4917
|
+
flexShrink: 0
|
4813
4918
|
}));
|
4814
4919
|
});
|
4815
4920
|
$$19.legacy_pre_effect_reset();
|
@@ -4823,7 +4928,7 @@ function CloseButton($$anchor, $$props) {
|
|
4823
4928
|
class: `close-button ${isLeftLabelPlacement ? "close-button-order-two" : ""}`,
|
4824
4929
|
"data-layer-id": layerId(),
|
4825
4930
|
style: $$19.get(style)
|
4826
|
-
}, "svelte-
|
4931
|
+
}, "svelte-18wmfyq"));
|
4827
4932
|
$$19.event("click", $$element, handleClick);
|
4828
4933
|
var fragment_1 = root_1$4();
|
4829
4934
|
var span = $$19.first_child(fragment_1);
|
@@ -4834,7 +4939,7 @@ function CloseButton($$anchor, $$props) {
|
|
4834
4939
|
{
|
4835
4940
|
var consequent = ($$anchor$2) => {
|
4836
4941
|
var span_1 = root_2$1();
|
4837
|
-
$$19.set_class(span_1, 1, `close-button-label ${isLeftLabelPlacement ? "close-button-order-one" : ""}`, "svelte-
|
4942
|
+
$$19.set_class(span_1, 1, `close-button-label ${isLeftLabelPlacement ? "close-button-order-one" : ""}`, "svelte-18wmfyq");
|
4838
4943
|
span_1.textContent = label;
|
4839
4944
|
$$19.template_effect(() => $$19.set_style(span_1, $$19.get(labelStyle)));
|
4840
4945
|
$$19.append($$anchor$2, span_1);
|
@@ -4911,16 +5016,16 @@ const IMAGE_ROUND_STYLES = {
|
|
4911
5016
|
borderBottomRightRadius: 0
|
4912
5017
|
},
|
4913
5018
|
rounded: {
|
4914
|
-
borderTopLeftRadius: "
|
4915
|
-
borderTopRightRadius: "
|
4916
|
-
borderBottomLeftRadius: "
|
4917
|
-
borderBottomRightRadius: "
|
5019
|
+
borderTopLeftRadius: "8px",
|
5020
|
+
borderTopRightRadius: "8px",
|
5021
|
+
borderBottomLeftRadius: "8px",
|
5022
|
+
borderBottomRightRadius: "8px"
|
4918
5023
|
},
|
4919
5024
|
circle: {
|
4920
|
-
borderTopLeftRadius: "
|
4921
|
-
borderTopRightRadius: "
|
4922
|
-
borderBottomLeftRadius: "
|
4923
|
-
borderBottomRightRadius: "
|
5025
|
+
borderTopLeftRadius: "16px",
|
5026
|
+
borderTopRightRadius: "16px",
|
5027
|
+
borderBottomLeftRadius: "16px",
|
5028
|
+
borderBottomRightRadius: "16px"
|
4924
5029
|
}
|
4925
5030
|
};
|
4926
5031
|
|
@@ -4934,23 +5039,43 @@ const $$css$16 = {
|
|
4934
5039
|
function Image($$anchor, $$props) {
|
4935
5040
|
$$18.push($$props, false);
|
4936
5041
|
$$18.append_styles($$anchor, $$css$16);
|
5042
|
+
const styleObj = $$18.mutable_state();
|
4937
5043
|
const style = $$18.mutable_state();
|
5044
|
+
const imgStyle = $$18.mutable_state();
|
4938
5045
|
let props = $$18.prop($$props, "props", 24, () => ({}));
|
4939
5046
|
let layerId = $$18.prop($$props, "layerId", 8, "");
|
4940
5047
|
useInjectCustomizeCss(props());
|
4941
5048
|
const { attributes, element, handleClick } = useClickable_default(props());
|
4942
5049
|
const aspectVariantStyles = ASPECT_VARIANT[props().aspectVariant]?.getProps();
|
4943
5050
|
const width = props().width ?? "100%";
|
4944
|
-
|
4945
|
-
|
5051
|
+
const calcImgRadius = (parentRadius, borderWidth) => {
|
5052
|
+
const radiusSize = parentRadius ? parseInt(parentRadius) : 0;
|
5053
|
+
if (radiusSize === 0) return 0;
|
5054
|
+
if (parentRadius === "100%") return "100%";
|
5055
|
+
return radiusSize > 0 ? `calc(${parentRadius} - ${borderWidth})` : void 0;
|
5056
|
+
};
|
5057
|
+
$$18.legacy_pre_effect(() => ($$18.deep_read_state(props()), toCssPadding), () => {
|
5058
|
+
$$18.set(styleObj, {
|
4946
5059
|
...props().borderTopLeftRadius ? toCssRadius(props()) : IMAGE_ROUND_STYLES[props().shape ?? "square"],
|
4947
5060
|
width,
|
4948
5061
|
flexShrink: String(width).indexOf("px") !== -1 ? 0 : 1,
|
4949
5062
|
height: props().height ?? "auto",
|
4950
5063
|
aspectRatio: props().aspect ?? aspectVariantStyles?.aspect,
|
4951
5064
|
...toCssCommon(props()),
|
4952
|
-
...toCssBorder(props())
|
4953
|
-
|
5065
|
+
...toCssBorder(props()),
|
5066
|
+
...toCssPadding(props())
|
5067
|
+
});
|
5068
|
+
});
|
5069
|
+
$$18.legacy_pre_effect(() => $$18.get(styleObj), () => {
|
5070
|
+
$$18.set(style, objToStyle($$18.get(styleObj)));
|
5071
|
+
});
|
5072
|
+
$$18.legacy_pre_effect(() => $$18.get(styleObj), () => {
|
5073
|
+
$$18.set(imgStyle, objToStyle({ ...toCssRadius({
|
5074
|
+
borderTopLeftRadius: calcImgRadius($$18.get(styleObj).borderTopLeftRadius, $$18.get(styleObj).borderTopWidth),
|
5075
|
+
borderTopRightRadius: calcImgRadius($$18.get(styleObj).borderTopRightRadius, $$18.get(styleObj).borderTopWidth),
|
5076
|
+
borderBottomLeftRadius: calcImgRadius($$18.get(styleObj).borderBottomLeftRadius, $$18.get(styleObj).borderTopWidth),
|
5077
|
+
borderBottomRightRadius: calcImgRadius($$18.get(styleObj).borderBottomRightRadius, $$18.get(styleObj).borderTopWidth)
|
5078
|
+
}) }));
|
4954
5079
|
});
|
4955
5080
|
$$18.legacy_pre_effect_reset();
|
4956
5081
|
$$18.init();
|
@@ -4969,6 +5094,7 @@ function Image($$anchor, $$props) {
|
|
4969
5094
|
$$18.template_effect(() => {
|
4970
5095
|
$$18.set_attribute(img, "src", props().image);
|
4971
5096
|
$$18.set_attribute(img, "alt", props().alt);
|
5097
|
+
$$18.set_style(img, $$18.get(imgStyle));
|
4972
5098
|
});
|
4973
5099
|
$$18.append($$anchor$1, img);
|
4974
5100
|
});
|
@@ -5008,6 +5134,7 @@ function Layout($$anchor, $$props) {
|
|
5008
5134
|
const style = $$17.mutable_state();
|
5009
5135
|
let props = $$17.prop($$props, "props", 24, () => ({}));
|
5010
5136
|
let layerId = $$17.prop($$props, "layerId", 8, "");
|
5137
|
+
const { brandKit } = useBrandKit();
|
5011
5138
|
useInjectCustomizeCss(props());
|
5012
5139
|
const { attributes, element, handleClick } = useClickable_default(props());
|
5013
5140
|
$$17.legacy_pre_effect(() => ($$17.deep_read_state(props()), toCssBorder), () => {
|
@@ -5019,13 +5146,14 @@ function Layout($$anchor, $$props) {
|
|
5019
5146
|
rowGap: props().rowGap ?? props().gap,
|
5020
5147
|
columnGap: props().columnGap ?? props().gap,
|
5021
5148
|
width: props().width,
|
5149
|
+
height: props().height,
|
5022
5150
|
...toCssOverflow(props()),
|
5023
5151
|
...toCssShadow(props()),
|
5024
5152
|
...toCssRadius(props()),
|
5025
|
-
...toCssBackground(props()),
|
5153
|
+
...toCssBackground(props(), brandKit),
|
5026
5154
|
...toCssCommon(props()),
|
5027
5155
|
...toCssPadding(props()),
|
5028
|
-
...toCssBorder(props())
|
5156
|
+
...toCssBorder(props(), brandKit)
|
5029
5157
|
}));
|
5030
5158
|
});
|
5031
5159
|
$$17.legacy_pre_effect_reset();
|
@@ -5325,20 +5453,6 @@ function SliderItem($$anchor, $$props) {
|
|
5325
5453
|
$$15.pop();
|
5326
5454
|
}
|
5327
5455
|
|
5328
|
-
//#endregion
|
5329
|
-
//#region src/components-flex/text/styles.ts
|
5330
|
-
const callback$1 = ({ brandKit }) => ({
|
5331
|
-
default: { color: brandKit.color_text_primary },
|
5332
|
-
gray: { color: brandKit.color_text_secondary },
|
5333
|
-
brand: { color: brandKit.color_brand },
|
5334
|
-
success: { color: brandKit.color_success },
|
5335
|
-
warning: { color: brandKit.color_warning },
|
5336
|
-
danger: { color: brandKit.color_danger },
|
5337
|
-
info: { color: brandKit.color_info },
|
5338
|
-
white: { color: brandKit.color_white }
|
5339
|
-
});
|
5340
|
-
const getTextThemeStyles = getPropStyles(callback$1);
|
5341
|
-
|
5342
5456
|
//#endregion
|
5343
5457
|
//#region src/components-flex/text/constants.ts
|
5344
5458
|
const TEXT_VARIANTS = { size: {
|
@@ -6112,11 +6226,9 @@ function List($$anchor, $$props) {
|
|
6112
6226
|
const style = $$7.mutable_state();
|
6113
6227
|
let layerId = $$7.prop($$props, "layerId", 8);
|
6114
6228
|
let props = $$7.prop($$props, "props", 8);
|
6229
|
+
const { brandKit } = useBrandKit();
|
6115
6230
|
useInjectCustomizeCss(props());
|
6116
6231
|
const vars = getVariables();
|
6117
|
-
console.log(vars);
|
6118
|
-
console.log(props().actionTableKey);
|
6119
|
-
console.log(vars[props().actionTableKey]);
|
6120
6232
|
setContext(LIST_ITEM_CONTEXT_KEY, {
|
6121
6233
|
paddingTop: props().itemPaddingTop,
|
6122
6234
|
paddingLeft: props().itemPaddingLeft,
|
@@ -6124,8 +6236,8 @@ function List($$anchor, $$props) {
|
|
6124
6236
|
paddingBottom: props().itemPaddingBottom,
|
6125
6237
|
height: props().itemHeight,
|
6126
6238
|
borderTopWidth: props().borderWidth,
|
6127
|
-
borderTopColor: props().borderColor,
|
6128
|
-
borderTopStyle:
|
6239
|
+
borderTopColor: props().borderColor ?? BORDER_COLOR_VARIANT[props().borderColorVariant]?.getProps(brandKit)?.borderColor,
|
6240
|
+
borderTopStyle: "solid",
|
6129
6241
|
gap: props().itemGap
|
6130
6242
|
});
|
6131
6243
|
$$7.legacy_pre_effect(() => $$7.deep_read_state(props()), () => {
|
@@ -6197,6 +6309,7 @@ function MultiColumn($$anchor, $$props) {
|
|
6197
6309
|
const style = $$6.mutable_state();
|
6198
6310
|
let layerId = $$6.prop($$props, "layerId", 8);
|
6199
6311
|
let props = $$6.prop($$props, "props", 8);
|
6312
|
+
const { brandKit } = useBrandKit();
|
6200
6313
|
useInjectCustomizeCss(props());
|
6201
6314
|
let listGap = (() => {
|
6202
6315
|
if (!props().gap) return "0";
|
@@ -6214,8 +6327,8 @@ function MultiColumn($$anchor, $$props) {
|
|
6214
6327
|
paddingRight: props().itemPaddingRight,
|
6215
6328
|
paddingBottom: props().itemPaddingBottom,
|
6216
6329
|
borderLeftWidth: props().borderWidth,
|
6217
|
-
borderLeftColor: props().borderColor,
|
6218
|
-
borderLeftStyle: props().borderStyle,
|
6330
|
+
borderLeftColor: props().borderColor ?? BORDER_COLOR_VARIANT[props().borderColorVariant]?.getProps(brandKit)?.borderColor,
|
6331
|
+
borderLeftStyle: props().borderStyle ?? "solid",
|
6219
6332
|
gap: listGap,
|
6220
6333
|
innerGap: props().itemGap
|
6221
6334
|
});
|
@@ -6845,6 +6958,10 @@ __export(index_svelte5_exports, {
|
|
6845
6958
|
AVATAR_SIZE_STYLES: () => AVATAR_SIZE_STYLES,
|
6846
6959
|
Alignments: () => Alignments,
|
6847
6960
|
AnimationStyles: () => AnimationStyles,
|
6961
|
+
BACKGROUND_COLOR_VARIANT: () => BACKGROUND_COLOR_VARIANT,
|
6962
|
+
BACKGROUND_COLOR_VARIANTS: () => BACKGROUND_COLOR_VARIANTS,
|
6963
|
+
BORDER_COLOR_VARIANT: () => BORDER_COLOR_VARIANT,
|
6964
|
+
BORDER_COLOR_VARIANTS: () => BORDER_COLOR_VARIANTS,
|
6848
6965
|
BUTTON_ICON_ANGLE: () => BUTTON_ICON_ANGLE,
|
6849
6966
|
BUTTON_LINK_TARGET: () => BUTTON_LINK_TARGET,
|
6850
6967
|
BUTTON_OUTLINED_ROUND_STYLES: () => BUTTON_OUTLINED_ROUND_STYLES,
|