@plaidev/karte-action-sdk 1.1.239 → 1.1.240
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/hydrate/index.es.d.ts +28 -4
- package/dist/hydrate/index.es.js +110 -106
- package/dist/index.es.d.ts +28 -4
- package/dist/index.es.js +110 -106
- package/package.json +1 -1
|
@@ -2437,7 +2437,7 @@ declare const BUTTON_SIZE: {
|
|
|
2437
2437
|
readonly large: "Large";
|
|
2438
2438
|
readonly extra_large: "XLarge";
|
|
2439
2439
|
};
|
|
2440
|
-
declare const
|
|
2440
|
+
declare const BUTTON_THEME: {
|
|
2441
2441
|
readonly default: "\u30C7\u30D5\u30A9\u30EB\u30C8";
|
|
2442
2442
|
readonly theme: "\u30C6\u30FC\u30DE\u30AB\u30E9\u30FC";
|
|
2443
2443
|
readonly alert: "\u30A2\u30E9\u30FC\u30C8";
|
|
@@ -2459,7 +2459,7 @@ declare const BUTTON_ICON_ANGLE: {
|
|
|
2459
2459
|
type ButtonProps = CommonProps & {
|
|
2460
2460
|
label?: string;
|
|
2461
2461
|
size?: keyof typeof BUTTON_SIZE;
|
|
2462
|
-
|
|
2462
|
+
theme?: keyof typeof BUTTON_THEME;
|
|
2463
2463
|
round?: keyof typeof BUTTON_ROUND;
|
|
2464
2464
|
isLink?: boolean;
|
|
2465
2465
|
isIcon?: boolean;
|
|
@@ -2470,9 +2470,33 @@ type ButtonProps = CommonProps & {
|
|
|
2470
2470
|
width?: Properties["width"];
|
|
2471
2471
|
wrap?: "wrap" | "nowrap";
|
|
2472
2472
|
fontWeight?: Properties["fontWeight"];
|
|
2473
|
-
|
|
2473
|
+
color?: Properties["color"];
|
|
2474
2474
|
backgroundColor?: Properties["backgroundColor"];
|
|
2475
2475
|
};
|
|
2476
|
+
declare const BUTTON_VARIANTS: {
|
|
2477
|
+
size: {
|
|
2478
|
+
extra_small: Properties<0 | (string & {}), string & {}>;
|
|
2479
|
+
small: Properties<0 | (string & {}), string & {}>;
|
|
2480
|
+
medium: Properties<0 | (string & {}), string & {}>;
|
|
2481
|
+
large: Properties<0 | (string & {}), string & {}>;
|
|
2482
|
+
extra_large: Properties<0 | (string & {}), string & {}>;
|
|
2483
|
+
};
|
|
2484
|
+
theme: {
|
|
2485
|
+
theme: Properties<0 | (string & {}), string & {}>;
|
|
2486
|
+
default: Properties<0 | (string & {}), string & {}>;
|
|
2487
|
+
transparent: Properties<0 | (string & {}), string & {}>;
|
|
2488
|
+
alert: Properties<0 | (string & {}), string & {}>;
|
|
2489
|
+
};
|
|
2490
|
+
round: {
|
|
2491
|
+
none: Properties<0 | (string & {}), string & {}>;
|
|
2492
|
+
default: {};
|
|
2493
|
+
fulled: Properties<0 | (string & {}), string & {}>;
|
|
2494
|
+
};
|
|
2495
|
+
wrap: {
|
|
2496
|
+
nowrap: Properties<0 | (string & {}), string & {}>;
|
|
2497
|
+
wrap: Properties<0 | (string & {}), string & {}>;
|
|
2498
|
+
};
|
|
2499
|
+
};
|
|
2476
2500
|
declare const TEXT_BUTTON_SIZE: {
|
|
2477
2501
|
readonly extra_small: "XSmall";
|
|
2478
2502
|
readonly small: "Small";
|
|
@@ -2710,7 +2734,7 @@ declare const TEXT_VARIANTS: {
|
|
|
2710
2734
|
};
|
|
2711
2735
|
};
|
|
2712
2736
|
};
|
|
2713
|
-
export { ACTION_HOOK_LABEL, KARTE_MODAL_ROOT, create, destroyAction, onCreate, onDestroy, showModal, destroy, initialize, finalize, loadGlobalScript, loadGlobalStyle, applyGlobalCss, getState, setState, getStates, isOpened, getVariables, setVariables, resetVariables, getEventHandlers, setEventHandlers, resetEventHandlers, getSystem, setSetting, eventHandlers, variables, formData, state, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, DefaultElasticity, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, RegExpProp, Image, LengthUnits, LengthUnit, Length, Color, FontWeight, SYSTEM_FONT, Fonts, Font, Justifies, Justify, Alignments, Alignment, FlexDirections, FlexDirection, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, BoxShadow, Style, TransitState, WritingModes, WritingMode, DateTime, Icon, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonColor, DefaultFormButtonColor, ModalStyle, ModalBreakPoint, DefaultModalBreakPoint, FormIdentifyTextFields, FormIdentifyTextField, FormIdentifyTextFieldValidations, FormIdentifyTextFieldPlaceholders, DefaultFormIdentifyTextField, FormIdentifyBooleanFields, FormIdentifyBooleanField, DefaultFormIdentifyBooleanField, showAction, closeAction, loadStyle, applyCss, onShow, onClose, onChangeState, getActionRoot, getCssVariables, show, close, ensureModalRoot, createApp, createFog, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, addChoiceAnswer, addFreeAnswer, removeAnswer, getAnsweredQuestion, getAnsweredQuestionIds, sendAnswer, sendAnswers, widget, onMount, onDestory, beforeUpdate, afterUpdate, tick, LAYOUT_COMPONENT_NAMES, ComponentBaseProps, COMPONENT_PARAMETER_TYPES, ComponentParameterType, ComponentParameterOption, ComponentParameter, PositionProps, CommonProps, BorderProps, PaddingProps, RadiusProps, BackgroundColorProps, BackgroundImageProps, ShadowProps, AVATAR_SIZE, AVATAR_SHAPE, AvatarProps, BUTTON_SIZE,
|
|
2737
|
+
export { ACTION_HOOK_LABEL, KARTE_MODAL_ROOT, create, destroyAction, onCreate, onDestroy, showModal, destroy, initialize, finalize, loadGlobalScript, loadGlobalStyle, applyGlobalCss, getState, setState, getStates, isOpened, getVariables, setVariables, resetVariables, getEventHandlers, setEventHandlers, resetEventHandlers, getSystem, setSetting, eventHandlers, variables, formData, state, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, DefaultElasticity, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, RegExpProp, Image, LengthUnits, LengthUnit, Length, Color, FontWeight, SYSTEM_FONT, Fonts, Font, Justifies, Justify, Alignments, Alignment, FlexDirections, FlexDirection, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, BoxShadow, Style, TransitState, WritingModes, WritingMode, DateTime, Icon, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonColor, DefaultFormButtonColor, ModalStyle, ModalBreakPoint, DefaultModalBreakPoint, FormIdentifyTextFields, FormIdentifyTextField, FormIdentifyTextFieldValidations, FormIdentifyTextFieldPlaceholders, DefaultFormIdentifyTextField, FormIdentifyBooleanFields, FormIdentifyBooleanField, DefaultFormIdentifyBooleanField, showAction, closeAction, loadStyle, applyCss, onShow, onClose, onChangeState, getActionRoot, getCssVariables, show, close, ensureModalRoot, createApp, createFog, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, addChoiceAnswer, addFreeAnswer, removeAnswer, getAnsweredQuestion, getAnsweredQuestionIds, sendAnswer, sendAnswers, widget, onMount, onDestory, beforeUpdate, afterUpdate, tick, LAYOUT_COMPONENT_NAMES, ComponentBaseProps, COMPONENT_PARAMETER_TYPES, ComponentParameterType, ComponentParameterOption, ComponentParameter, PositionProps, CommonProps, BorderProps, PaddingProps, RadiusProps, BackgroundColorProps, BackgroundImageProps, ShadowProps, AVATAR_SIZE, AVATAR_SHAPE, AvatarProps, BUTTON_SIZE, BUTTON_THEME, BUTTON_ROUND, BUTTON_LINK_TARGET, BUTTON_ICON_ANGLE, ButtonProps, BUTTON_VARIANTS, TEXT_BUTTON_SIZE, TEXT_BUTTON_COLOR, TEXT_BUTTON_ROUND, TEXT_BUTTON_LINK_TARGET, TEXT_BUTTON_ICON_ANGLE, TextButtonProps, CloseButtonProps, ICON_SIZE, ICON_VARIANTS, IconVariant, ICON_PARAMS, IconProps, ImageProps, LAYOUT_DISPLAY_TYPE, LayoutDisplayType, LAYOUT_DIRECTION, LayoutFlexDirection, LAYOUT_ALIGN, LayoutFlexAlign, LAYOUT_JUSTIFY, LayoutFlexJustify, LayerLayoutProps, LAYER_TEXT_ALIGN_VALUES, LAYER_TEXT_FONT_WEIGHT_VALUES, LAYER_TEXT_SIZE, LayerTextProps, TEXT_VARIANTS };
|
|
2714
2738
|
export type { SystemConfig, ActionVariables, ActionEventHandler, ActionProps, ActionOptions, ActionHook, ActionHookLog, ActionChangeStateHook, SendFunction, PublishFunction, OnScrollContext, OnScrollFunction, ScrollDirection, LogLevel, Log, Event, ActionCloseHook, ShowTrigger, CloseTrigger, CollectionConfig, ActionTableRowRequestConfig, ActionTableRowsRequestConfig, ActionTableQueryRequestConfig, ActionTableRequestConfig };
|
|
2715
2739
|
export { default as State } from './components/State.svelte';
|
|
2716
2740
|
export { default as StateItem } from './components/StateItem.svelte';
|
package/dist/hydrate/index.es.js
CHANGED
|
@@ -14176,13 +14176,102 @@ class Icon extends SvelteComponent {
|
|
|
14176
14176
|
}
|
|
14177
14177
|
}
|
|
14178
14178
|
|
|
14179
|
+
const BUTTON_VARIANTS = {
|
|
14180
|
+
size: {
|
|
14181
|
+
extra_small: {
|
|
14182
|
+
minHeight: '32px',
|
|
14183
|
+
paddingInline: '12px',
|
|
14184
|
+
fontSize: '12px',
|
|
14185
|
+
paddingBlock: '8px',
|
|
14186
|
+
lineHeight: 1.5,
|
|
14187
|
+
borderRadius: '4px',
|
|
14188
|
+
},
|
|
14189
|
+
small: {
|
|
14190
|
+
minHeight: '36px',
|
|
14191
|
+
paddingInline: '16px',
|
|
14192
|
+
fontSize: '13px',
|
|
14193
|
+
paddingBlock: '8px',
|
|
14194
|
+
lineHeight: 1.5,
|
|
14195
|
+
borderRadius: '4px',
|
|
14196
|
+
},
|
|
14197
|
+
// 'min-h-10 px-6 text-sm py-2 leading-[150%]'
|
|
14198
|
+
medium: {
|
|
14199
|
+
minHeight: '40px',
|
|
14200
|
+
paddingInline: '24px',
|
|
14201
|
+
fontSize: '14px',
|
|
14202
|
+
paddingBlock: '8px',
|
|
14203
|
+
lineHeight: 1.5,
|
|
14204
|
+
borderRadius: '4px',
|
|
14205
|
+
},
|
|
14206
|
+
// 'min-h-14 px-8 text-lg py-3 leading-[150%]'
|
|
14207
|
+
large: {
|
|
14208
|
+
minHeight: '48px',
|
|
14209
|
+
paddingInline: '32px',
|
|
14210
|
+
fontSize: '14px',
|
|
14211
|
+
paddingBlock: '10px',
|
|
14212
|
+
lineHeight: 1.5,
|
|
14213
|
+
borderRadius: '4px',
|
|
14214
|
+
},
|
|
14215
|
+
extra_large: {
|
|
14216
|
+
minHeight: '56px',
|
|
14217
|
+
paddingInline: '40px',
|
|
14218
|
+
fontSize: '17px',
|
|
14219
|
+
paddingBlock: '12px',
|
|
14220
|
+
lineHeight: 1.5,
|
|
14221
|
+
borderRadius: '4px',
|
|
14222
|
+
},
|
|
14223
|
+
},
|
|
14224
|
+
theme: {
|
|
14225
|
+
theme: {
|
|
14226
|
+
backgroundColor: 'rgba(18,160,160,1)',
|
|
14227
|
+
color: '#FFFFFF',
|
|
14228
|
+
fontWeight: 'bold',
|
|
14229
|
+
},
|
|
14230
|
+
default: {
|
|
14231
|
+
backgroundColor: '#33403e',
|
|
14232
|
+
color: '#FFFFFF',
|
|
14233
|
+
fontWeight: 'bold',
|
|
14234
|
+
// 'bg-action-default hover:bg-action-default-hover text-default'
|
|
14235
|
+
},
|
|
14236
|
+
transparent: {
|
|
14237
|
+
backgroundColor: 'rgba(255, 255, 255, 0)',
|
|
14238
|
+
color: '#00100ea1',
|
|
14239
|
+
fontWeight: 'bold',
|
|
14240
|
+
// 'bg-action-default hover:bg-action-default-hover text-default'
|
|
14241
|
+
},
|
|
14242
|
+
alert: {
|
|
14243
|
+
backgroundColor: 'rgb(242,83,32,1)',
|
|
14244
|
+
color: '#FFFFFF',
|
|
14245
|
+
fontWeight: 'bold',
|
|
14246
|
+
// 'bg-negative hover:bg-negative-hover text-primitive-white font-bold'
|
|
14247
|
+
},
|
|
14248
|
+
},
|
|
14249
|
+
round: {
|
|
14250
|
+
none: {
|
|
14251
|
+
borderRadius: 0,
|
|
14252
|
+
},
|
|
14253
|
+
default: {},
|
|
14254
|
+
fulled: {
|
|
14255
|
+
borderRadius: '56px',
|
|
14256
|
+
},
|
|
14257
|
+
},
|
|
14258
|
+
wrap: {
|
|
14259
|
+
nowrap: {
|
|
14260
|
+
whiteSpace: 'nowrap',
|
|
14261
|
+
},
|
|
14262
|
+
wrap: {
|
|
14263
|
+
whiteSpace: 'pre-wrap',
|
|
14264
|
+
},
|
|
14265
|
+
},
|
|
14266
|
+
};
|
|
14267
|
+
|
|
14179
14268
|
/* src/components-flex/button/Button.svelte generated by Svelte v3.53.1 */
|
|
14180
14269
|
|
|
14181
14270
|
function add_css$7(target) {
|
|
14182
14271
|
append_styles(target, "svelte-15m50q3", ".button.svelte-15m50q3{display:inline-flex;align-content:center;justify-content:center;gap:0.65em;cursor:pointer;outline:0;transition:background-color 0.12s, border-color 0.12s, color 0.12s}.button-icon.svelte-15m50q3{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em}");
|
|
14183
14272
|
}
|
|
14184
14273
|
|
|
14185
|
-
// (
|
|
14274
|
+
// (47:2) {#if (props.isIcon && props.iconVariant)}
|
|
14186
14275
|
function create_if_block$3(ctx) {
|
|
14187
14276
|
let div;
|
|
14188
14277
|
let icon;
|
|
@@ -14192,7 +14281,7 @@ function create_if_block$3(ctx) {
|
|
|
14192
14281
|
props: {
|
|
14193
14282
|
props: {
|
|
14194
14283
|
variant: /*props*/ ctx[0].iconVariant,
|
|
14195
|
-
color:
|
|
14284
|
+
color: BUTTON_VARIANTS.theme[/*props*/ ctx[0].theme ?? 'default'].theme
|
|
14196
14285
|
}
|
|
14197
14286
|
}
|
|
14198
14287
|
});
|
|
@@ -14223,7 +14312,7 @@ function create_if_block$3(ctx) {
|
|
|
14223
14312
|
|
|
14224
14313
|
if (dirty & /*props*/ 1) icon_changes.props = {
|
|
14225
14314
|
variant: /*props*/ ctx[0].iconVariant,
|
|
14226
|
-
color:
|
|
14315
|
+
color: BUTTON_VARIANTS.theme[/*props*/ ctx[0].theme ?? 'default'].theme
|
|
14227
14316
|
};
|
|
14228
14317
|
|
|
14229
14318
|
icon.$set(icon_changes);
|
|
@@ -14295,7 +14384,7 @@ function create_fragment$7(ctx) {
|
|
|
14295
14384
|
current = true;
|
|
14296
14385
|
|
|
14297
14386
|
if (!mounted) {
|
|
14298
|
-
dispose = listen(button, "click", checkStopPropagation('click', /*handleClick*/ ctx[
|
|
14387
|
+
dispose = listen(button, "click", checkStopPropagation('click', /*handleClick*/ ctx[3]));
|
|
14299
14388
|
mounted = true;
|
|
14300
14389
|
}
|
|
14301
14390
|
},
|
|
@@ -14359,96 +14448,11 @@ function instance$7($$self, $$props, $$invalidate) {
|
|
|
14359
14448
|
let { props = {} } = $$props;
|
|
14360
14449
|
let { layerId = '' } = $$props;
|
|
14361
14450
|
|
|
14362
|
-
const
|
|
14363
|
-
size: {
|
|
14364
|
-
extra_small: {
|
|
14365
|
-
minHeight: '32px',
|
|
14366
|
-
paddingInline: '12px',
|
|
14367
|
-
fontSize: '12px',
|
|
14368
|
-
paddingBlock: '8px',
|
|
14369
|
-
lineHeight: 1.5,
|
|
14370
|
-
borderRadius: '4px'
|
|
14371
|
-
},
|
|
14372
|
-
small: {
|
|
14373
|
-
minHeight: '36px',
|
|
14374
|
-
paddingInline: '16px',
|
|
14375
|
-
fontSize: '13px',
|
|
14376
|
-
paddingBlock: '8px',
|
|
14377
|
-
lineHeight: 1.5,
|
|
14378
|
-
borderRadius: '4px'
|
|
14379
|
-
},
|
|
14380
|
-
// 'min-h-10 px-6 text-sm py-2 leading-[150%]'
|
|
14381
|
-
medium: {
|
|
14382
|
-
minHeight: '40px',
|
|
14383
|
-
paddingInline: '24px',
|
|
14384
|
-
fontSize: '14px',
|
|
14385
|
-
paddingBlock: '8px',
|
|
14386
|
-
lineHeight: 1.5,
|
|
14387
|
-
borderRadius: '4px'
|
|
14388
|
-
},
|
|
14389
|
-
// 'min-h-14 px-8 text-lg py-3 leading-[150%]'
|
|
14390
|
-
large: {
|
|
14391
|
-
minHeight: '48px',
|
|
14392
|
-
paddingInline: '32px',
|
|
14393
|
-
fontSize: '14px',
|
|
14394
|
-
paddingBlock: '10px',
|
|
14395
|
-
lineHeight: 1.5,
|
|
14396
|
-
borderRadius: '4px'
|
|
14397
|
-
},
|
|
14398
|
-
extra_large: {
|
|
14399
|
-
minHeight: '56px',
|
|
14400
|
-
paddingInline: '40px',
|
|
14401
|
-
fontSize: '17px',
|
|
14402
|
-
paddingBlock: '12px',
|
|
14403
|
-
lineHeight: 1.5,
|
|
14404
|
-
borderRadius: '4px'
|
|
14405
|
-
}
|
|
14406
|
-
},
|
|
14407
|
-
color: {
|
|
14408
|
-
theme: {
|
|
14409
|
-
backgroundColor: 'rgba(18,160,160,1)',
|
|
14410
|
-
color: '#FFFFFF',
|
|
14411
|
-
fontWeight: 'bold'
|
|
14412
|
-
},
|
|
14413
|
-
default: {
|
|
14414
|
-
backgroundColor: '#33403e',
|
|
14415
|
-
color: '#FFFFFF',
|
|
14416
|
-
fontWeight: 'bold'
|
|
14417
|
-
}, // 'bg-action-default hover:bg-action-default-hover text-default'
|
|
14418
|
-
transparent: {
|
|
14419
|
-
backgroundColor: 'rgba(255, 255, 255, 0)',
|
|
14420
|
-
color: '#00100ea1',
|
|
14421
|
-
fontWeight: 'bold'
|
|
14422
|
-
}, // 'bg-action-default hover:bg-action-default-hover text-default'
|
|
14423
|
-
alert: {
|
|
14424
|
-
backgroundColor: 'rgb(242,83,32,1)',
|
|
14425
|
-
color: '#FFFFFF',
|
|
14426
|
-
fontWeight: 'bold'
|
|
14427
|
-
}, // 'bg-negative hover:bg-negative-hover text-primitive-white font-bold'
|
|
14428
|
-
|
|
14429
|
-
},
|
|
14430
|
-
round: {
|
|
14431
|
-
none: { borderRadius: 0 },
|
|
14432
|
-
default: {},
|
|
14433
|
-
fulled: { borderRadius: '56px' }
|
|
14434
|
-
},
|
|
14435
|
-
wrap: {
|
|
14436
|
-
nowrap: { whiteSpace: 'nowrap' },
|
|
14437
|
-
wrap: { whiteSpace: 'pre-wrap' }
|
|
14438
|
-
}
|
|
14439
|
-
};
|
|
14440
|
-
|
|
14441
|
-
const getCssColor = () => {
|
|
14451
|
+
const getCssVariantTheme = () => {
|
|
14442
14452
|
return {
|
|
14443
|
-
backgroundColor: props.backgroundColor
|
|
14444
|
-
|
|
14445
|
-
:
|
|
14446
|
-
color: props.fontColor
|
|
14447
|
-
? props.fontColor
|
|
14448
|
-
: VARIANTS.color[props.color ?? 'default'].color,
|
|
14449
|
-
fontWeight: props.fontWeight
|
|
14450
|
-
? props.fontWeight
|
|
14451
|
-
: VARIANTS.color[props.color ?? 'default'].fontWeight
|
|
14453
|
+
backgroundColor: props.backgroundColor ?? BUTTON_VARIANTS.theme[props.theme ?? 'default'].backgroundColor,
|
|
14454
|
+
color: props.color ?? BUTTON_VARIANTS.theme[props.theme ?? 'default'].color,
|
|
14455
|
+
fontWeight: props.fontWeight ?? BUTTON_VARIANTS.theme[props.theme ?? 'default'].fontWeight
|
|
14452
14456
|
};
|
|
14453
14457
|
};
|
|
14454
14458
|
|
|
@@ -14461,9 +14465,9 @@ function instance$7($$self, $$props, $$invalidate) {
|
|
|
14461
14465
|
}
|
|
14462
14466
|
|
|
14463
14467
|
$$self.$$set = $$props => {
|
|
14464
|
-
if ('onClick' in $$props) $$invalidate(
|
|
14465
|
-
if ('eventName' in $$props) $$invalidate(
|
|
14466
|
-
if ('eventValue' in $$props) $$invalidate(
|
|
14468
|
+
if ('onClick' in $$props) $$invalidate(4, onClick = $$props.onClick);
|
|
14469
|
+
if ('eventName' in $$props) $$invalidate(5, eventName = $$props.eventName);
|
|
14470
|
+
if ('eventValue' in $$props) $$invalidate(6, eventValue = $$props.eventValue);
|
|
14467
14471
|
if ('props' in $$props) $$invalidate(0, props = $$props.props);
|
|
14468
14472
|
if ('layerId' in $$props) $$invalidate(1, layerId = $$props.layerId);
|
|
14469
14473
|
};
|
|
@@ -14479,19 +14483,19 @@ function instance$7($$self, $$props, $$invalidate) {
|
|
|
14479
14483
|
border: 0,
|
|
14480
14484
|
transition: 'background-color 0.12s, border-color 0.12s, color 0.12s',
|
|
14481
14485
|
width: props.width,
|
|
14482
|
-
...
|
|
14483
|
-
...
|
|
14484
|
-
...
|
|
14486
|
+
...BUTTON_VARIANTS.size[props.size ?? 'medium'],
|
|
14487
|
+
...BUTTON_VARIANTS.wrap[props.wrap ?? 'nowrap'],
|
|
14488
|
+
...BUTTON_VARIANTS.round[props.round ?? 'default'],
|
|
14485
14489
|
...props.iconAngle
|
|
14486
14490
|
? { flexDirection: props.iconAngle }
|
|
14487
14491
|
: {},
|
|
14488
|
-
...
|
|
14492
|
+
...getCssVariantTheme(),
|
|
14489
14493
|
...toCssCommon(props)
|
|
14490
14494
|
}));
|
|
14491
14495
|
}
|
|
14492
14496
|
};
|
|
14493
14497
|
|
|
14494
|
-
return [props, layerId, style,
|
|
14498
|
+
return [props, layerId, style, handleClick, onClick, eventName, eventValue];
|
|
14495
14499
|
}
|
|
14496
14500
|
|
|
14497
14501
|
class Button extends SvelteComponent {
|
|
@@ -14505,9 +14509,9 @@ class Button extends SvelteComponent {
|
|
|
14505
14509
|
create_fragment$7,
|
|
14506
14510
|
safe_not_equal,
|
|
14507
14511
|
{
|
|
14508
|
-
onClick:
|
|
14509
|
-
eventName:
|
|
14510
|
-
eventValue:
|
|
14512
|
+
onClick: 4,
|
|
14513
|
+
eventName: 5,
|
|
14514
|
+
eventValue: 6,
|
|
14511
14515
|
props: 0,
|
|
14512
14516
|
layerId: 1
|
|
14513
14517
|
},
|
|
@@ -14523,7 +14527,7 @@ const BUTTON_SIZE = {
|
|
|
14523
14527
|
large: 'Large',
|
|
14524
14528
|
extra_large: 'XLarge',
|
|
14525
14529
|
};
|
|
14526
|
-
const
|
|
14530
|
+
const BUTTON_THEME = {
|
|
14527
14531
|
default: 'デフォルト',
|
|
14528
14532
|
theme: 'テーマカラー',
|
|
14529
14533
|
alert: 'アラート',
|
|
@@ -16306,4 +16310,4 @@ class Modal extends SvelteComponent {
|
|
|
16306
16310
|
}
|
|
16307
16311
|
}
|
|
16308
16312
|
|
|
16309
|
-
export { ACTION_HOOK_LABEL, AVATAR_SHAPE, AVATAR_SIZE, Alignments, AnimationStyles,
|
|
16313
|
+
export { ACTION_HOOK_LABEL, AVATAR_SHAPE, AVATAR_SIZE, Alignments, AnimationStyles, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_ROUND, BUTTON_SIZE, BUTTON_THEME, BUTTON_VARIANTS, BackgroundSizes, Box, COMPONENT_PARAMETER_TYPES, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, Avatar as FlexAvatar, Button as FlexButton, CloseButton as FlexCloseButton, FlexDirections, Icon as FlexIcon, Image as FlexImage, FlexItem, Layout as FlexLayout, Modal as FlexModal, Text as FlexText, TextButton as FlexTextButton, Fonts, FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices, FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ICON_PARAMS, ICON_SIZE, ICON_VARIANTS, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_ALIGN_VALUES, LAYER_TEXT_FONT_WEIGHT_VALUES, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal$1 as Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, SYSTEM_FONT, Slide, SlideItem, State, StateItem, TEXT_BUTTON_COLOR, TEXT_BUTTON_ICON_ANGLE, TEXT_BUTTON_LINK_TARGET, TEXT_BUTTON_ROUND, TEXT_BUTTON_SIZE, TEXT_VARIANTS, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, 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$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, variables, widget };
|
package/dist/index.es.d.ts
CHANGED
|
@@ -2437,7 +2437,7 @@ declare const BUTTON_SIZE: {
|
|
|
2437
2437
|
readonly large: "Large";
|
|
2438
2438
|
readonly extra_large: "XLarge";
|
|
2439
2439
|
};
|
|
2440
|
-
declare const
|
|
2440
|
+
declare const BUTTON_THEME: {
|
|
2441
2441
|
readonly default: "\u30C7\u30D5\u30A9\u30EB\u30C8";
|
|
2442
2442
|
readonly theme: "\u30C6\u30FC\u30DE\u30AB\u30E9\u30FC";
|
|
2443
2443
|
readonly alert: "\u30A2\u30E9\u30FC\u30C8";
|
|
@@ -2459,7 +2459,7 @@ declare const BUTTON_ICON_ANGLE: {
|
|
|
2459
2459
|
type ButtonProps = CommonProps & {
|
|
2460
2460
|
label?: string;
|
|
2461
2461
|
size?: keyof typeof BUTTON_SIZE;
|
|
2462
|
-
|
|
2462
|
+
theme?: keyof typeof BUTTON_THEME;
|
|
2463
2463
|
round?: keyof typeof BUTTON_ROUND;
|
|
2464
2464
|
isLink?: boolean;
|
|
2465
2465
|
isIcon?: boolean;
|
|
@@ -2470,9 +2470,33 @@ type ButtonProps = CommonProps & {
|
|
|
2470
2470
|
width?: Properties["width"];
|
|
2471
2471
|
wrap?: "wrap" | "nowrap";
|
|
2472
2472
|
fontWeight?: Properties["fontWeight"];
|
|
2473
|
-
|
|
2473
|
+
color?: Properties["color"];
|
|
2474
2474
|
backgroundColor?: Properties["backgroundColor"];
|
|
2475
2475
|
};
|
|
2476
|
+
declare const BUTTON_VARIANTS: {
|
|
2477
|
+
size: {
|
|
2478
|
+
extra_small: Properties<0 | (string & {}), string & {}>;
|
|
2479
|
+
small: Properties<0 | (string & {}), string & {}>;
|
|
2480
|
+
medium: Properties<0 | (string & {}), string & {}>;
|
|
2481
|
+
large: Properties<0 | (string & {}), string & {}>;
|
|
2482
|
+
extra_large: Properties<0 | (string & {}), string & {}>;
|
|
2483
|
+
};
|
|
2484
|
+
theme: {
|
|
2485
|
+
theme: Properties<0 | (string & {}), string & {}>;
|
|
2486
|
+
default: Properties<0 | (string & {}), string & {}>;
|
|
2487
|
+
transparent: Properties<0 | (string & {}), string & {}>;
|
|
2488
|
+
alert: Properties<0 | (string & {}), string & {}>;
|
|
2489
|
+
};
|
|
2490
|
+
round: {
|
|
2491
|
+
none: Properties<0 | (string & {}), string & {}>;
|
|
2492
|
+
default: {};
|
|
2493
|
+
fulled: Properties<0 | (string & {}), string & {}>;
|
|
2494
|
+
};
|
|
2495
|
+
wrap: {
|
|
2496
|
+
nowrap: Properties<0 | (string & {}), string & {}>;
|
|
2497
|
+
wrap: Properties<0 | (string & {}), string & {}>;
|
|
2498
|
+
};
|
|
2499
|
+
};
|
|
2476
2500
|
declare const TEXT_BUTTON_SIZE: {
|
|
2477
2501
|
readonly extra_small: "XSmall";
|
|
2478
2502
|
readonly small: "Small";
|
|
@@ -2710,7 +2734,7 @@ declare const TEXT_VARIANTS: {
|
|
|
2710
2734
|
};
|
|
2711
2735
|
};
|
|
2712
2736
|
};
|
|
2713
|
-
export { ACTION_HOOK_LABEL, KARTE_MODAL_ROOT, create, destroyAction, onCreate, onDestroy, showModal, destroy, initialize, finalize, loadGlobalScript, loadGlobalStyle, applyGlobalCss, getState, setState, getStates, isOpened, getVariables, setVariables, resetVariables, getEventHandlers, setEventHandlers, resetEventHandlers, getSystem, setSetting, eventHandlers, variables, formData, state, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, DefaultElasticity, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, RegExpProp, Image, LengthUnits, LengthUnit, Length, Color, FontWeight, SYSTEM_FONT, Fonts, Font, Justifies, Justify, Alignments, Alignment, FlexDirections, FlexDirection, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, BoxShadow, Style, TransitState, WritingModes, WritingMode, DateTime, Icon, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonColor, DefaultFormButtonColor, ModalStyle, ModalBreakPoint, DefaultModalBreakPoint, FormIdentifyTextFields, FormIdentifyTextField, FormIdentifyTextFieldValidations, FormIdentifyTextFieldPlaceholders, DefaultFormIdentifyTextField, FormIdentifyBooleanFields, FormIdentifyBooleanField, DefaultFormIdentifyBooleanField, showAction, closeAction, loadStyle, applyCss, onShow, onClose, onChangeState, getActionRoot, getCssVariables, show, close, ensureModalRoot, createApp, createFog, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, addChoiceAnswer, addFreeAnswer, removeAnswer, getAnsweredQuestion, getAnsweredQuestionIds, sendAnswer, sendAnswers, widget, onMount, onDestory, beforeUpdate, afterUpdate, tick, LAYOUT_COMPONENT_NAMES, ComponentBaseProps, COMPONENT_PARAMETER_TYPES, ComponentParameterType, ComponentParameterOption, ComponentParameter, PositionProps, CommonProps, BorderProps, PaddingProps, RadiusProps, BackgroundColorProps, BackgroundImageProps, ShadowProps, AVATAR_SIZE, AVATAR_SHAPE, AvatarProps, BUTTON_SIZE,
|
|
2737
|
+
export { ACTION_HOOK_LABEL, KARTE_MODAL_ROOT, create, destroyAction, onCreate, onDestroy, showModal, destroy, initialize, finalize, loadGlobalScript, loadGlobalStyle, applyGlobalCss, getState, setState, getStates, isOpened, getVariables, setVariables, resetVariables, getEventHandlers, setEventHandlers, resetEventHandlers, getSystem, setSetting, eventHandlers, variables, formData, state, onScroll, onTime, getLogs, getEvents, logger, listenLogger, hideOnScroll, hideOnTime, showOnScroll, showOnTime, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, Elasticities, Elasticity, ElasticityStyle, DefaultElasticity, TextDirections, TextDirection, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, RegExpProp, Image, LengthUnits, LengthUnit, Length, Color, FontWeight, SYSTEM_FONT, Fonts, Font, Justifies, Justify, Alignments, Alignment, FlexDirections, FlexDirection, ObjectFits, ObjectFit, ClipPaths, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, BoxShadow, Style, TransitState, WritingModes, WritingMode, DateTime, Icon, ListSeparatorTypes, EdgePosition, DefaultEdgePosition, ListSeparatorNone, ListSeparatorBorder, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparator, ListBackgroundTypes, ListBackgroundNone, ListBackgroundStripe, ListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListBackground, ListDirections, ListDirection, ListContext, SlideButtonIcon, SlideButtonText, SlideButton, DefaultSlideButton, SlideButtonPosition, SlideNavigationButton, DefaultSlideNavigationButton, FormInputName, FormButtonColor, DefaultFormButtonColor, ModalStyle, ModalBreakPoint, DefaultModalBreakPoint, FormIdentifyTextFields, FormIdentifyTextField, FormIdentifyTextFieldValidations, FormIdentifyTextFieldPlaceholders, DefaultFormIdentifyTextField, FormIdentifyBooleanFields, FormIdentifyBooleanField, DefaultFormIdentifyBooleanField, showAction, closeAction, loadStyle, applyCss, onShow, onClose, onChangeState, getActionRoot, getCssVariables, show, close, ensureModalRoot, createApp, createFog, collection, loadActionTableRow, loadActionTableRows, loadActionTableQuery, loadActionTable, addChoiceAnswer, addFreeAnswer, removeAnswer, getAnsweredQuestion, getAnsweredQuestionIds, sendAnswer, sendAnswers, widget, onMount, onDestory, beforeUpdate, afterUpdate, tick, LAYOUT_COMPONENT_NAMES, ComponentBaseProps, COMPONENT_PARAMETER_TYPES, ComponentParameterType, ComponentParameterOption, ComponentParameter, PositionProps, CommonProps, BorderProps, PaddingProps, RadiusProps, BackgroundColorProps, BackgroundImageProps, ShadowProps, AVATAR_SIZE, AVATAR_SHAPE, AvatarProps, BUTTON_SIZE, BUTTON_THEME, BUTTON_ROUND, BUTTON_LINK_TARGET, BUTTON_ICON_ANGLE, ButtonProps, BUTTON_VARIANTS, TEXT_BUTTON_SIZE, TEXT_BUTTON_COLOR, TEXT_BUTTON_ROUND, TEXT_BUTTON_LINK_TARGET, TEXT_BUTTON_ICON_ANGLE, TextButtonProps, CloseButtonProps, ICON_SIZE, ICON_VARIANTS, IconVariant, ICON_PARAMS, IconProps, ImageProps, LAYOUT_DISPLAY_TYPE, LayoutDisplayType, LAYOUT_DIRECTION, LayoutFlexDirection, LAYOUT_ALIGN, LayoutFlexAlign, LAYOUT_JUSTIFY, LayoutFlexJustify, LayerLayoutProps, LAYER_TEXT_ALIGN_VALUES, LAYER_TEXT_FONT_WEIGHT_VALUES, LAYER_TEXT_SIZE, LayerTextProps, TEXT_VARIANTS };
|
|
2714
2738
|
export type { SystemConfig, ActionVariables, ActionEventHandler, ActionProps, ActionOptions, ActionHook, ActionHookLog, ActionChangeStateHook, SendFunction, PublishFunction, OnScrollContext, OnScrollFunction, ScrollDirection, LogLevel, Log, Event, ActionCloseHook, ShowTrigger, CloseTrigger, CollectionConfig, ActionTableRowRequestConfig, ActionTableRowsRequestConfig, ActionTableQueryRequestConfig, ActionTableRequestConfig };
|
|
2715
2739
|
export { default as State } from './components/State.svelte';
|
|
2716
2740
|
export { default as StateItem } from './components/StateItem.svelte';
|
package/dist/index.es.js
CHANGED
|
@@ -13162,13 +13162,102 @@ class Icon extends SvelteComponent {
|
|
|
13162
13162
|
}
|
|
13163
13163
|
}
|
|
13164
13164
|
|
|
13165
|
+
const BUTTON_VARIANTS = {
|
|
13166
|
+
size: {
|
|
13167
|
+
extra_small: {
|
|
13168
|
+
minHeight: '32px',
|
|
13169
|
+
paddingInline: '12px',
|
|
13170
|
+
fontSize: '12px',
|
|
13171
|
+
paddingBlock: '8px',
|
|
13172
|
+
lineHeight: 1.5,
|
|
13173
|
+
borderRadius: '4px',
|
|
13174
|
+
},
|
|
13175
|
+
small: {
|
|
13176
|
+
minHeight: '36px',
|
|
13177
|
+
paddingInline: '16px',
|
|
13178
|
+
fontSize: '13px',
|
|
13179
|
+
paddingBlock: '8px',
|
|
13180
|
+
lineHeight: 1.5,
|
|
13181
|
+
borderRadius: '4px',
|
|
13182
|
+
},
|
|
13183
|
+
// 'min-h-10 px-6 text-sm py-2 leading-[150%]'
|
|
13184
|
+
medium: {
|
|
13185
|
+
minHeight: '40px',
|
|
13186
|
+
paddingInline: '24px',
|
|
13187
|
+
fontSize: '14px',
|
|
13188
|
+
paddingBlock: '8px',
|
|
13189
|
+
lineHeight: 1.5,
|
|
13190
|
+
borderRadius: '4px',
|
|
13191
|
+
},
|
|
13192
|
+
// 'min-h-14 px-8 text-lg py-3 leading-[150%]'
|
|
13193
|
+
large: {
|
|
13194
|
+
minHeight: '48px',
|
|
13195
|
+
paddingInline: '32px',
|
|
13196
|
+
fontSize: '14px',
|
|
13197
|
+
paddingBlock: '10px',
|
|
13198
|
+
lineHeight: 1.5,
|
|
13199
|
+
borderRadius: '4px',
|
|
13200
|
+
},
|
|
13201
|
+
extra_large: {
|
|
13202
|
+
minHeight: '56px',
|
|
13203
|
+
paddingInline: '40px',
|
|
13204
|
+
fontSize: '17px',
|
|
13205
|
+
paddingBlock: '12px',
|
|
13206
|
+
lineHeight: 1.5,
|
|
13207
|
+
borderRadius: '4px',
|
|
13208
|
+
},
|
|
13209
|
+
},
|
|
13210
|
+
theme: {
|
|
13211
|
+
theme: {
|
|
13212
|
+
backgroundColor: 'rgba(18,160,160,1)',
|
|
13213
|
+
color: '#FFFFFF',
|
|
13214
|
+
fontWeight: 'bold',
|
|
13215
|
+
},
|
|
13216
|
+
default: {
|
|
13217
|
+
backgroundColor: '#33403e',
|
|
13218
|
+
color: '#FFFFFF',
|
|
13219
|
+
fontWeight: 'bold',
|
|
13220
|
+
// 'bg-action-default hover:bg-action-default-hover text-default'
|
|
13221
|
+
},
|
|
13222
|
+
transparent: {
|
|
13223
|
+
backgroundColor: 'rgba(255, 255, 255, 0)',
|
|
13224
|
+
color: '#00100ea1',
|
|
13225
|
+
fontWeight: 'bold',
|
|
13226
|
+
// 'bg-action-default hover:bg-action-default-hover text-default'
|
|
13227
|
+
},
|
|
13228
|
+
alert: {
|
|
13229
|
+
backgroundColor: 'rgb(242,83,32,1)',
|
|
13230
|
+
color: '#FFFFFF',
|
|
13231
|
+
fontWeight: 'bold',
|
|
13232
|
+
// 'bg-negative hover:bg-negative-hover text-primitive-white font-bold'
|
|
13233
|
+
},
|
|
13234
|
+
},
|
|
13235
|
+
round: {
|
|
13236
|
+
none: {
|
|
13237
|
+
borderRadius: 0,
|
|
13238
|
+
},
|
|
13239
|
+
default: {},
|
|
13240
|
+
fulled: {
|
|
13241
|
+
borderRadius: '56px',
|
|
13242
|
+
},
|
|
13243
|
+
},
|
|
13244
|
+
wrap: {
|
|
13245
|
+
nowrap: {
|
|
13246
|
+
whiteSpace: 'nowrap',
|
|
13247
|
+
},
|
|
13248
|
+
wrap: {
|
|
13249
|
+
whiteSpace: 'pre-wrap',
|
|
13250
|
+
},
|
|
13251
|
+
},
|
|
13252
|
+
};
|
|
13253
|
+
|
|
13165
13254
|
/* src/components-flex/button/Button.svelte generated by Svelte v3.53.1 */
|
|
13166
13255
|
|
|
13167
13256
|
function add_css$7(target) {
|
|
13168
13257
|
append_styles(target, "svelte-15m50q3", ".button.svelte-15m50q3{display:inline-flex;align-content:center;justify-content:center;gap:0.65em;cursor:pointer;outline:0;transition:background-color 0.12s, border-color 0.12s, color 0.12s}.button-icon.svelte-15m50q3{display:flex;align-items:center;justify-content:center;margin-left:-0.2em;margin-right:-0.2em}");
|
|
13169
13258
|
}
|
|
13170
13259
|
|
|
13171
|
-
// (
|
|
13260
|
+
// (47:2) {#if (props.isIcon && props.iconVariant)}
|
|
13172
13261
|
function create_if_block$3(ctx) {
|
|
13173
13262
|
let div;
|
|
13174
13263
|
let icon;
|
|
@@ -13178,7 +13267,7 @@ function create_if_block$3(ctx) {
|
|
|
13178
13267
|
props: {
|
|
13179
13268
|
props: {
|
|
13180
13269
|
variant: /*props*/ ctx[0].iconVariant,
|
|
13181
|
-
color:
|
|
13270
|
+
color: BUTTON_VARIANTS.theme[/*props*/ ctx[0].theme ?? 'default'].theme
|
|
13182
13271
|
}
|
|
13183
13272
|
}
|
|
13184
13273
|
});
|
|
@@ -13199,7 +13288,7 @@ function create_if_block$3(ctx) {
|
|
|
13199
13288
|
|
|
13200
13289
|
if (dirty & /*props*/ 1) icon_changes.props = {
|
|
13201
13290
|
variant: /*props*/ ctx[0].iconVariant,
|
|
13202
|
-
color:
|
|
13291
|
+
color: BUTTON_VARIANTS.theme[/*props*/ ctx[0].theme ?? 'default'].theme
|
|
13203
13292
|
};
|
|
13204
13293
|
|
|
13205
13294
|
icon.$set(icon_changes);
|
|
@@ -13251,7 +13340,7 @@ function create_fragment$7(ctx) {
|
|
|
13251
13340
|
current = true;
|
|
13252
13341
|
|
|
13253
13342
|
if (!mounted) {
|
|
13254
|
-
dispose = listen(button, "click", checkStopPropagation('click', /*handleClick*/ ctx[
|
|
13343
|
+
dispose = listen(button, "click", checkStopPropagation('click', /*handleClick*/ ctx[3]));
|
|
13255
13344
|
mounted = true;
|
|
13256
13345
|
}
|
|
13257
13346
|
},
|
|
@@ -13315,96 +13404,11 @@ function instance$7($$self, $$props, $$invalidate) {
|
|
|
13315
13404
|
let { props = {} } = $$props;
|
|
13316
13405
|
let { layerId = '' } = $$props;
|
|
13317
13406
|
|
|
13318
|
-
const
|
|
13319
|
-
size: {
|
|
13320
|
-
extra_small: {
|
|
13321
|
-
minHeight: '32px',
|
|
13322
|
-
paddingInline: '12px',
|
|
13323
|
-
fontSize: '12px',
|
|
13324
|
-
paddingBlock: '8px',
|
|
13325
|
-
lineHeight: 1.5,
|
|
13326
|
-
borderRadius: '4px'
|
|
13327
|
-
},
|
|
13328
|
-
small: {
|
|
13329
|
-
minHeight: '36px',
|
|
13330
|
-
paddingInline: '16px',
|
|
13331
|
-
fontSize: '13px',
|
|
13332
|
-
paddingBlock: '8px',
|
|
13333
|
-
lineHeight: 1.5,
|
|
13334
|
-
borderRadius: '4px'
|
|
13335
|
-
},
|
|
13336
|
-
// 'min-h-10 px-6 text-sm py-2 leading-[150%]'
|
|
13337
|
-
medium: {
|
|
13338
|
-
minHeight: '40px',
|
|
13339
|
-
paddingInline: '24px',
|
|
13340
|
-
fontSize: '14px',
|
|
13341
|
-
paddingBlock: '8px',
|
|
13342
|
-
lineHeight: 1.5,
|
|
13343
|
-
borderRadius: '4px'
|
|
13344
|
-
},
|
|
13345
|
-
// 'min-h-14 px-8 text-lg py-3 leading-[150%]'
|
|
13346
|
-
large: {
|
|
13347
|
-
minHeight: '48px',
|
|
13348
|
-
paddingInline: '32px',
|
|
13349
|
-
fontSize: '14px',
|
|
13350
|
-
paddingBlock: '10px',
|
|
13351
|
-
lineHeight: 1.5,
|
|
13352
|
-
borderRadius: '4px'
|
|
13353
|
-
},
|
|
13354
|
-
extra_large: {
|
|
13355
|
-
minHeight: '56px',
|
|
13356
|
-
paddingInline: '40px',
|
|
13357
|
-
fontSize: '17px',
|
|
13358
|
-
paddingBlock: '12px',
|
|
13359
|
-
lineHeight: 1.5,
|
|
13360
|
-
borderRadius: '4px'
|
|
13361
|
-
}
|
|
13362
|
-
},
|
|
13363
|
-
color: {
|
|
13364
|
-
theme: {
|
|
13365
|
-
backgroundColor: 'rgba(18,160,160,1)',
|
|
13366
|
-
color: '#FFFFFF',
|
|
13367
|
-
fontWeight: 'bold'
|
|
13368
|
-
},
|
|
13369
|
-
default: {
|
|
13370
|
-
backgroundColor: '#33403e',
|
|
13371
|
-
color: '#FFFFFF',
|
|
13372
|
-
fontWeight: 'bold'
|
|
13373
|
-
}, // 'bg-action-default hover:bg-action-default-hover text-default'
|
|
13374
|
-
transparent: {
|
|
13375
|
-
backgroundColor: 'rgba(255, 255, 255, 0)',
|
|
13376
|
-
color: '#00100ea1',
|
|
13377
|
-
fontWeight: 'bold'
|
|
13378
|
-
}, // 'bg-action-default hover:bg-action-default-hover text-default'
|
|
13379
|
-
alert: {
|
|
13380
|
-
backgroundColor: 'rgb(242,83,32,1)',
|
|
13381
|
-
color: '#FFFFFF',
|
|
13382
|
-
fontWeight: 'bold'
|
|
13383
|
-
}, // 'bg-negative hover:bg-negative-hover text-primitive-white font-bold'
|
|
13384
|
-
|
|
13385
|
-
},
|
|
13386
|
-
round: {
|
|
13387
|
-
none: { borderRadius: 0 },
|
|
13388
|
-
default: {},
|
|
13389
|
-
fulled: { borderRadius: '56px' }
|
|
13390
|
-
},
|
|
13391
|
-
wrap: {
|
|
13392
|
-
nowrap: { whiteSpace: 'nowrap' },
|
|
13393
|
-
wrap: { whiteSpace: 'pre-wrap' }
|
|
13394
|
-
}
|
|
13395
|
-
};
|
|
13396
|
-
|
|
13397
|
-
const getCssColor = () => {
|
|
13407
|
+
const getCssVariantTheme = () => {
|
|
13398
13408
|
return {
|
|
13399
|
-
backgroundColor: props.backgroundColor
|
|
13400
|
-
|
|
13401
|
-
:
|
|
13402
|
-
color: props.fontColor
|
|
13403
|
-
? props.fontColor
|
|
13404
|
-
: VARIANTS.color[props.color ?? 'default'].color,
|
|
13405
|
-
fontWeight: props.fontWeight
|
|
13406
|
-
? props.fontWeight
|
|
13407
|
-
: VARIANTS.color[props.color ?? 'default'].fontWeight
|
|
13409
|
+
backgroundColor: props.backgroundColor ?? BUTTON_VARIANTS.theme[props.theme ?? 'default'].backgroundColor,
|
|
13410
|
+
color: props.color ?? BUTTON_VARIANTS.theme[props.theme ?? 'default'].color,
|
|
13411
|
+
fontWeight: props.fontWeight ?? BUTTON_VARIANTS.theme[props.theme ?? 'default'].fontWeight
|
|
13408
13412
|
};
|
|
13409
13413
|
};
|
|
13410
13414
|
|
|
@@ -13417,9 +13421,9 @@ function instance$7($$self, $$props, $$invalidate) {
|
|
|
13417
13421
|
}
|
|
13418
13422
|
|
|
13419
13423
|
$$self.$$set = $$props => {
|
|
13420
|
-
if ('onClick' in $$props) $$invalidate(
|
|
13421
|
-
if ('eventName' in $$props) $$invalidate(
|
|
13422
|
-
if ('eventValue' in $$props) $$invalidate(
|
|
13424
|
+
if ('onClick' in $$props) $$invalidate(4, onClick = $$props.onClick);
|
|
13425
|
+
if ('eventName' in $$props) $$invalidate(5, eventName = $$props.eventName);
|
|
13426
|
+
if ('eventValue' in $$props) $$invalidate(6, eventValue = $$props.eventValue);
|
|
13423
13427
|
if ('props' in $$props) $$invalidate(0, props = $$props.props);
|
|
13424
13428
|
if ('layerId' in $$props) $$invalidate(1, layerId = $$props.layerId);
|
|
13425
13429
|
};
|
|
@@ -13435,19 +13439,19 @@ function instance$7($$self, $$props, $$invalidate) {
|
|
|
13435
13439
|
border: 0,
|
|
13436
13440
|
transition: 'background-color 0.12s, border-color 0.12s, color 0.12s',
|
|
13437
13441
|
width: props.width,
|
|
13438
|
-
...
|
|
13439
|
-
...
|
|
13440
|
-
...
|
|
13442
|
+
...BUTTON_VARIANTS.size[props.size ?? 'medium'],
|
|
13443
|
+
...BUTTON_VARIANTS.wrap[props.wrap ?? 'nowrap'],
|
|
13444
|
+
...BUTTON_VARIANTS.round[props.round ?? 'default'],
|
|
13441
13445
|
...props.iconAngle
|
|
13442
13446
|
? { flexDirection: props.iconAngle }
|
|
13443
13447
|
: {},
|
|
13444
|
-
...
|
|
13448
|
+
...getCssVariantTheme(),
|
|
13445
13449
|
...toCssCommon(props)
|
|
13446
13450
|
}));
|
|
13447
13451
|
}
|
|
13448
13452
|
};
|
|
13449
13453
|
|
|
13450
|
-
return [props, layerId, style,
|
|
13454
|
+
return [props, layerId, style, handleClick, onClick, eventName, eventValue];
|
|
13451
13455
|
}
|
|
13452
13456
|
|
|
13453
13457
|
class Button extends SvelteComponent {
|
|
@@ -13461,9 +13465,9 @@ class Button extends SvelteComponent {
|
|
|
13461
13465
|
create_fragment$7,
|
|
13462
13466
|
safe_not_equal,
|
|
13463
13467
|
{
|
|
13464
|
-
onClick:
|
|
13465
|
-
eventName:
|
|
13466
|
-
eventValue:
|
|
13468
|
+
onClick: 4,
|
|
13469
|
+
eventName: 5,
|
|
13470
|
+
eventValue: 6,
|
|
13467
13471
|
props: 0,
|
|
13468
13472
|
layerId: 1
|
|
13469
13473
|
},
|
|
@@ -13479,7 +13483,7 @@ const BUTTON_SIZE = {
|
|
|
13479
13483
|
large: 'Large',
|
|
13480
13484
|
extra_large: 'XLarge',
|
|
13481
13485
|
};
|
|
13482
|
-
const
|
|
13486
|
+
const BUTTON_THEME = {
|
|
13483
13487
|
default: 'デフォルト',
|
|
13484
13488
|
theme: 'テーマカラー',
|
|
13485
13489
|
alert: 'アラート',
|
|
@@ -15133,4 +15137,4 @@ class Modal extends SvelteComponent {
|
|
|
15133
15137
|
}
|
|
15134
15138
|
}
|
|
15135
15139
|
|
|
15136
|
-
export { ACTION_HOOK_LABEL, AVATAR_SHAPE, AVATAR_SIZE, Alignments, AnimationStyles,
|
|
15140
|
+
export { ACTION_HOOK_LABEL, AVATAR_SHAPE, AVATAR_SIZE, Alignments, AnimationStyles, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_ROUND, BUTTON_SIZE, BUTTON_THEME, BUTTON_VARIANTS, BackgroundSizes, Box, COMPONENT_PARAMETER_TYPES, ClipPaths, CodeElement, Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, Avatar as FlexAvatar, Button as FlexButton, CloseButton as FlexCloseButton, FlexDirections, Icon as FlexIcon, Image as FlexImage, FlexItem, Layout as FlexLayout, Modal as FlexModal, Text as FlexText, TextButton as FlexTextButton, Fonts, FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices, FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons, FormRatingButtonsFace, FormRatingButtonsNumber, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ICON_PARAMS, ICON_SIZE, ICON_VARIANTS, IconElement, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_ALIGN_VALUES, LAYER_TEXT_FONT_WEIGHT_VALUES, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal$1 as Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, SYSTEM_FONT, Slide, SlideItem, State, StateItem, TEXT_BUTTON_COLOR, TEXT_BUTTON_ICON_ANGLE, TEXT_BUTTON_LINK_TARGET, TEXT_BUTTON_ROUND, TEXT_BUTTON_SIZE, TEXT_VARIANTS, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, close, closeAction, collection$1 as collection, create, createApp, createFog, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getCssVariables, getEventHandlers, getEvents, getLogs, getState$1 as getState, getStates, getSystem, 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$1 as setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, variables, widget };
|