@plaidev/karte-action-sdk 1.1.85 → 1.1.86

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.
Files changed (5) hide show
  1. package/dist/hydrate/index.es.d.ts +17 -10
  2. package/dist/hydrate/index.es.js +98 -94
  3. package/dist/index.es.d.ts +17 -10
  4. package/dist/index.es.js +91 -90
  5. package/package.json +1 -1
package/dist/hydrate/index.es.d.ts CHANGED
@@ -196,9 +196,11 @@ type Cursor = typeof Cursors[number];
196
196
  declare const Overflows: string[];
197
197
  type Overflow = typeof Overflows[number];
198
198
  type Border = string;
199
+ type BorderStyle = string;
200
+ type BorderWidth = `${number}px`;
199
201
  type Style = string;
200
202
  type StateName = string;
201
- type ListSeparatorType = "none" | "border" | "stripe";
203
+ type ListSeparatorType = "none" | "border" | "stripe" | "gap";
202
204
  interface BaseListSeparator {
203
205
  type: ListSeparatorType;
204
206
  }
@@ -207,21 +209,26 @@ interface ListSeparatorNone extends BaseListSeparator {
207
209
  }
208
210
  interface ListSeparatorBorder extends BaseListSeparator {
209
211
  type: "border";
210
- border?: Border;
212
+ borderStyle: BorderStyle;
213
+ borderWidth?: BorderWidth;
214
+ borderColor?: Color;
211
215
  }
212
216
  interface ListSeparatorStripe extends BaseListSeparator {
213
217
  type: "stripe";
214
218
  background1?: Color;
215
219
  background2?: Color;
216
220
  }
217
- type ListSeparator = ListSeparatorNone | ListSeparatorBorder | ListSeparatorStripe;
218
- declare const DefaultListSeparatorNone: ListSeparatorNone;
219
- declare const DefaultListSeparatorBorder: ListSeparatorBorder;
220
- declare const DefaultListSeparatorStripe: ListSeparatorStripe;
221
- declare const DefaultListSeparator: ListSeparatorBorder;
221
+ interface ListSeparatorGap extends BaseListSeparator {
222
+ type: "gap";
223
+ gap: Length;
224
+ }
225
+ type ListSeparator = ListSeparatorNone | ListSeparatorBorder | ListSeparatorStripe | ListSeparatorGap;
226
+ declare const DefaultListSeparatorNone: Required<ListSeparatorNone>;
227
+ declare const DefaultListSeparatorBorder: Required<ListSeparatorBorder>;
228
+ declare const DefaultListSeparatorStripe: Required<ListSeparatorStripe>;
229
+ declare const DefaultListSeparatorGap: Required<ListSeparatorGap>;
230
+ declare const DefaultListSeparator: Required<ListSeparatorBorder>;
222
231
  type ListDirection = "vertical" | "horizontal";
223
- type ListItemSize = string;
224
- declare const DefaultListItemSize = "100%";
225
232
  type ListContext = {
226
233
  separator: ListSeparator;
227
234
  direction: ListDirection;
@@ -719,7 +726,7 @@ declare const collection: (config: {
719
726
  } | null | undefined, cb: (err: Error | null, items?: any) => void): void;
720
727
  set(key: string, value: string, cb: (err: Error | null) => void): void;
721
728
  };
722
- export { Store, getStoreState, isPreview, CustomVariables, CloseTrigger, ActionEventHandler, ALL_ACTION_ID, actionId, ACTION_SHOW_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_CHANGE_STATE_EVENT, state, states, opened, closed, maximumZindex, internalHandlers, customHandlers, destroyed, stopped, customVariables, setAutoStart, setState, initialize, finalize, send_event, setMiximumZindex, none, moveTo, linkTo, closeApp, runScript, execOnClickOperation, haveFunction, customAnimation, loadGlobalScript, applyGlobalCss, loadGlobalStyle, hashCode, NOOP, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, ScrollDirection, OnScrollContext, OnScrollFunction, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, Style, StateName, ListSeparatorNone, ListSeparatorBorder, ListSeparatorStripe, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorStripe, DefaultListSeparator, ListDirection, ListItemSize, DefaultListItemSize, ListContext, hideOnScroll, hideOnTime, showOnScroll, showOnTime, ActionProps, ActionOptions, create, dispatchDestroyEvent, destroy, showAction, closeAction, KARTE_ACTION_ROOT, KARTE_ACTION_RID, ensureActionRoot, onShow, onClose, onDestroy, onChangeState, h, createFog, EmbedLogic, embed, getActionShadowRoot, applyCss, loadStyle, showModal, ModalOptions, KARTE_MODAL_ROOT, ensureModalRoot, show, close, AppOptions, App, createApp, collection };
729
+ export { Store, getStoreState, isPreview, CustomVariables, CloseTrigger, ActionEventHandler, ALL_ACTION_ID, actionId, ACTION_SHOW_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_CHANGE_STATE_EVENT, state, states, opened, closed, maximumZindex, internalHandlers, customHandlers, destroyed, stopped, customVariables, setAutoStart, setState, initialize, finalize, send_event, setMiximumZindex, none, moveTo, linkTo, closeApp, runScript, execOnClickOperation, haveFunction, customAnimation, loadGlobalScript, applyGlobalCss, loadGlobalStyle, hashCode, NOOP, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, ScrollDirection, OnScrollContext, OnScrollFunction, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, Style, StateName, ListSeparatorNone, ListSeparatorBorder, ListSeparatorStripe, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorStripe, DefaultListSeparatorGap, DefaultListSeparator, ListDirection, ListContext, hideOnScroll, hideOnTime, showOnScroll, showOnTime, ActionProps, ActionOptions, create, dispatchDestroyEvent, destroy, showAction, closeAction, KARTE_ACTION_ROOT, KARTE_ACTION_RID, ensureActionRoot, onShow, onClose, onDestroy, onChangeState, h, createFog, EmbedLogic, embed, getActionShadowRoot, applyCss, loadStyle, showModal, ModalOptions, KARTE_MODAL_ROOT, ensureModalRoot, show, close, AppOptions, App, createApp, collection };
723
730
  export { default as State } from './components/State.svelte';
724
731
  export { default as StateItem } from './components/StateItem.svelte';
725
732
  export { default as Modal } from './components/Modal.svelte';
package/dist/hydrate/index.es.js CHANGED
@@ -511,15 +511,20 @@ const DefaultListSeparatorNone = {
511
511
  };
512
512
  const DefaultListSeparatorBorder = {
513
513
  type: 'border',
514
- border: 'solid 1px rgba(0, 0, 0, 0.06)',
514
+ borderStyle: 'solid',
515
+ borderWidth: '1px',
516
+ borderColor: 'rgba(0, 0, 0, 0.06)',
515
517
  };
516
518
  const DefaultListSeparatorStripe = {
517
519
  type: 'stripe',
518
520
  background1: 'rgba(0, 0, 0, 0.06)',
519
521
  background2: '#fff',
520
522
  };
523
+ const DefaultListSeparatorGap = {
524
+ type: 'gap',
525
+ gap: '8px',
526
+ };
521
527
  const DefaultListSeparator = DefaultListSeparatorBorder;
522
- const DefaultListItemSize = '100%';
523
528
 
524
529
  function doPresent({ direction, deltaRate }, downFn, upFn, condition = false) {
525
530
  if (direction === 'down' && deltaRate > 0) {
@@ -3320,12 +3325,11 @@ class ImageElement extends SvelteComponent {
3320
3325
  /* src/components/List.svelte generated by Svelte v3.53.1 */
3321
3326
 
3322
3327
  function add_css$5(target) {
3323
- append_styles(target, "svelte-cp9c9x", ".list.svelte-cp9c9x{display:flex;width:100%;height:100%;overflow:hidden}._vertical.svelte-cp9c9x{flex-direction:column}._horizontal.svelte-cp9c9x{flex-direction:row}");
3328
+ append_styles(target, "svelte-8kb8s9", ".list.svelte-8kb8s9{display:flex;width:100%;height:100%;overflow:hidden}");
3324
3329
  }
3325
3330
 
3326
3331
  function create_fragment$5(ctx) {
3327
3332
  let div;
3328
- let div_class_value;
3329
3333
  let current;
3330
3334
  const default_slot_template = /*#slots*/ ctx[5].default;
3331
3335
  const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[4], null);
@@ -3344,8 +3348,8 @@ function create_fragment$5(ctx) {
3344
3348
  this.h();
3345
3349
  },
3346
3350
  h() {
3347
- attr(div, "class", div_class_value = "" + (null_to_empty(`list _${/*direction*/ ctx[0]}`) + " svelte-cp9c9x"));
3348
- attr(div, "style", /*style*/ ctx[1]);
3351
+ attr(div, "class", "list svelte-8kb8s9");
3352
+ attr(div, "style", /*style*/ ctx[0]);
3349
3353
  },
3350
3354
  m(target, anchor) {
3351
3355
  insert_hydration(target, div, anchor);
@@ -3372,12 +3376,8 @@ function create_fragment$5(ctx) {
3372
3376
  }
3373
3377
  }
3374
3378
 
3375
- if (!current || dirty & /*direction*/ 1 && div_class_value !== (div_class_value = "" + (null_to_empty(`list _${/*direction*/ ctx[0]}`) + " svelte-cp9c9x"))) {
3376
- attr(div, "class", div_class_value);
3377
- }
3378
-
3379
- if (!current || dirty & /*style*/ 2) {
3380
- attr(div, "style", /*style*/ ctx[1]);
3379
+ if (!current || dirty & /*style*/ 1) {
3380
+ attr(div, "style", /*style*/ ctx[0]);
3381
3381
  }
3382
3382
  },
3383
3383
  i(local) {
@@ -3426,71 +3426,93 @@ function instance$5($$self, $$props, $$invalidate) {
3426
3426
  });
3427
3427
 
3428
3428
  $$self.$$set = $$props => {
3429
- if ('direction' in $$props) $$invalidate(0, direction = $$props.direction);
3429
+ if ('direction' in $$props) $$invalidate(1, direction = $$props.direction);
3430
3430
  if ('separator' in $$props) $$invalidate(2, separator = $$props.separator);
3431
3431
  if ('_style' in $$props) $$invalidate(3, _style = $$props._style);
3432
3432
  if ('$$scope' in $$props) $$invalidate(4, $$scope = $$props.$$scope);
3433
3433
  };
3434
3434
 
3435
3435
  $$self.$$.update = () => {
3436
- if ($$self.$$.dirty & /*_style*/ 8) {
3437
- $$invalidate(1, style = _style);
3436
+ if ($$self.$$.dirty & /*separator, direction, _style*/ 14) {
3437
+ $$invalidate(0, style = (() => {
3438
+ let listStyleArray = [];
3439
+
3440
+ if (separator.type === 'gap') {
3441
+ listStyleArray.push(`gap:${separator.gap ?? DefaultListSeparatorGap.gap}`);
3442
+ }
3443
+
3444
+ if (direction === 'vertical') {
3445
+ listStyleArray.push('flex-direction: column');
3446
+ } else if (direction === 'horizontal') {
3447
+ listStyleArray.push('flex-direction: row');
3448
+ }
3449
+
3450
+ return [..._style.split(';'), ...listStyleArray].join(';');
3451
+ })());
3438
3452
  }
3439
3453
  };
3440
3454
 
3441
- return [direction, style, separator, _style, $$scope, slots];
3455
+ return [style, direction, separator, _style, $$scope, slots];
3442
3456
  }
3443
3457
 
3444
3458
  class List extends SvelteComponent {
3445
3459
  constructor(options) {
3446
3460
  super();
3447
- init(this, options, instance$5, create_fragment$5, safe_not_equal, { direction: 0, separator: 2, _style: 3 }, add_css$5);
3461
+ init(this, options, instance$5, create_fragment$5, safe_not_equal, { direction: 1, separator: 2, _style: 3 }, add_css$5);
3448
3462
  }
3449
3463
  }
3450
3464
 
3451
3465
  /* src/components/ListItem.svelte generated by Svelte v3.53.1 */
3452
3466
 
3453
3467
  function add_css$4(target) {
3454
- append_styles(target, "svelte-1rlujzj", ".list-item.svelte-1rlujzj{flex:none;box-sizing:border-box;min-width:0;min-height:0}");
3468
+ append_styles(target, "svelte-10nu2lu", ".list-item.svelte-10nu2lu{flex:auto;box-sizing:border-box;min-width:0;min-height:0;position:relative}.list-item-inner.svelte-10nu2lu{position:absolute;inset:0}");
3455
3469
  }
3456
3470
 
3457
3471
  function create_fragment$4(ctx) {
3458
- let div;
3472
+ let div1;
3473
+ let div0;
3459
3474
  let current;
3460
3475
  let mounted;
3461
3476
  let dispose;
3462
- const default_slot_template = /*#slots*/ ctx[9].default;
3463
- const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[8], null);
3477
+ const default_slot_template = /*#slots*/ ctx[7].default;
3478
+ const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[6], null);
3464
3479
 
3465
3480
  return {
3466
3481
  c() {
3467
- div = element("div");
3482
+ div1 = element("div");
3483
+ div0 = element("div");
3468
3484
  if (default_slot) default_slot.c();
3469
3485
  this.h();
3470
3486
  },
3471
3487
  l(nodes) {
3472
- div = claim_element(nodes, "DIV", { class: true, style: true });
3473
- var div_nodes = children(div);
3474
- if (default_slot) default_slot.l(div_nodes);
3475
- div_nodes.forEach(detach);
3488
+ div1 = claim_element(nodes, "DIV", { class: true, style: true });
3489
+ var div1_nodes = children(div1);
3490
+ div0 = claim_element(div1_nodes, "DIV", { class: true, style: true });
3491
+ var div0_nodes = children(div0);
3492
+ if (default_slot) default_slot.l(div0_nodes);
3493
+ div0_nodes.forEach(detach);
3494
+ div1_nodes.forEach(detach);
3476
3495
  this.h();
3477
3496
  },
3478
3497
  h() {
3479
- attr(div, "class", "list-item svelte-1rlujzj");
3480
- attr(div, "style", /*style*/ ctx[0]);
3498
+ attr(div0, "class", "list-item-inner svelte-10nu2lu");
3499
+ attr(div0, "style", /*_style*/ ctx[0]);
3500
+ attr(div1, "class", "list-item svelte-10nu2lu");
3501
+ attr(div1, "style", /*listItemStyle*/ ctx[1]);
3481
3502
  },
3482
3503
  m(target, anchor) {
3483
- insert_hydration(target, div, anchor);
3504
+ insert_hydration(target, div1, anchor);
3505
+ append_hydration(div1, div0);
3484
3506
 
3485
3507
  if (default_slot) {
3486
- default_slot.m(div, null);
3508
+ default_slot.m(div0, null);
3487
3509
  }
3488
3510
 
3489
3511
  current = true;
3490
3512
 
3491
3513
  if (!mounted) {
3492
- dispose = listen(div, "click", function () {
3493
- if (is_function(/*click*/ ctx[1])) /*click*/ ctx[1].apply(this, arguments);
3514
+ dispose = listen(div1, "click", function () {
3515
+ if (is_function(/*click*/ ctx[2])) /*click*/ ctx[2].apply(this, arguments);
3494
3516
  });
3495
3517
 
3496
3518
  mounted = true;
@@ -3500,22 +3522,26 @@ function create_fragment$4(ctx) {
3500
3522
  ctx = new_ctx;
3501
3523
 
3502
3524
  if (default_slot) {
3503
- if (default_slot.p && (!current || dirty & /*$$scope*/ 256)) {
3525
+ if (default_slot.p && (!current || dirty & /*$$scope*/ 64)) {
3504
3526
  update_slot_base(
3505
3527
  default_slot,
3506
3528
  default_slot_template,
3507
3529
  ctx,
3508
- /*$$scope*/ ctx[8],
3530
+ /*$$scope*/ ctx[6],
3509
3531
  !current
3510
- ? get_all_dirty_from_scope(/*$$scope*/ ctx[8])
3511
- : get_slot_changes(default_slot_template, /*$$scope*/ ctx[8], dirty, null),
3532
+ ? get_all_dirty_from_scope(/*$$scope*/ ctx[6])
3533
+ : get_slot_changes(default_slot_template, /*$$scope*/ ctx[6], dirty, null),
3512
3534
  null
3513
3535
  );
3514
3536
  }
3515
3537
  }
3516
3538
 
3517
- if (!current || dirty & /*style*/ 1) {
3518
- attr(div, "style", /*style*/ ctx[0]);
3539
+ if (!current || dirty & /*_style*/ 1) {
3540
+ attr(div0, "style", /*_style*/ ctx[0]);
3541
+ }
3542
+
3543
+ if (!current || dirty & /*listItemStyle*/ 2) {
3544
+ attr(div1, "style", /*listItemStyle*/ ctx[1]);
3519
3545
  }
3520
3546
  },
3521
3547
  i(local) {
@@ -3528,7 +3554,7 @@ function create_fragment$4(ctx) {
3528
3554
  current = false;
3529
3555
  },
3530
3556
  d(detaching) {
3531
- if (detaching) detach(div);
3557
+ if (detaching) detach(div1);
3532
3558
  if (default_slot) default_slot.d(detaching);
3533
3559
  mounted = false;
3534
3560
  dispose();
@@ -3538,20 +3564,17 @@ function create_fragment$4(ctx) {
3538
3564
 
3539
3565
  function instance$4($$self, $$props, $$invalidate) {
3540
3566
  let click;
3541
- let style;
3567
+ let listItemStyle;
3542
3568
  let { $$slots: slots = {}, $$scope } = $$props;
3543
3569
  const { separator, direction, registerItem, unregisterItem } = getContext(LIST_CONTEXT_KEY);
3544
3570
  let index = 0;
3545
- let length = 0;
3546
3571
 
3547
3572
  const id = registerItem({
3548
3573
  onMount({ index: _index, length: _length }) {
3549
- $$invalidate(6, index = _index);
3550
- $$invalidate(7, length = _length);
3574
+ $$invalidate(5, index = _index);
3551
3575
  }
3552
3576
  });
3553
3577
 
3554
- let { size = DefaultListItemSize } = $$props;
3555
3578
  let { onClick = { operation: 'none', args: [] } } = $$props;
3556
3579
  let { clickEventName = '' } = $$props;
3557
3580
  let { _style = '' } = $$props;
@@ -3561,16 +3584,15 @@ function instance$4($$self, $$props, $$invalidate) {
3561
3584
  });
3562
3585
 
3563
3586
  $$self.$$set = $$props => {
3564
- if ('size' in $$props) $$invalidate(2, size = $$props.size);
3565
3587
  if ('onClick' in $$props) $$invalidate(3, onClick = $$props.onClick);
3566
3588
  if ('clickEventName' in $$props) $$invalidate(4, clickEventName = $$props.clickEventName);
3567
- if ('_style' in $$props) $$invalidate(5, _style = $$props._style);
3568
- if ('$$scope' in $$props) $$invalidate(8, $$scope = $$props.$$scope);
3589
+ if ('_style' in $$props) $$invalidate(0, _style = $$props._style);
3590
+ if ('$$scope' in $$props) $$invalidate(6, $$scope = $$props.$$scope);
3569
3591
  };
3570
3592
 
3571
3593
  $$self.$$.update = () => {
3572
3594
  if ($$self.$$.dirty & /*clickEventName, onClick*/ 24) {
3573
- $$invalidate(1, click = () => {
3595
+ $$invalidate(2, click = () => {
3574
3596
  if (clickEventName) {
3575
3597
  send_event(clickEventName);
3576
3598
  }
@@ -3579,72 +3601,54 @@ function instance$4($$self, $$props, $$invalidate) {
3579
3601
  });
3580
3602
  }
3581
3603
 
3582
- if ($$self.$$.dirty & /*index, length, size, _style*/ 228) {
3583
- $$invalidate(0, style = (() => {
3584
- let separatorStyle = '';
3604
+ if ($$self.$$.dirty & /*index*/ 32) {
3605
+ $$invalidate(1, listItemStyle = (() => {
3606
+ let separatorStyleArray = [];
3585
3607
 
3586
3608
  if (separator.type === "border") {
3587
- if (index < length - 1) {
3588
- const _separator = {
3589
- ...DefaultListSeparatorBorder,
3590
- ...separator
3591
- };
3592
-
3593
- const side = direction === 'horizontal' ? 'right' : 'bottom';
3594
- separatorStyle = `border-${side}:${_separator.border}`;
3609
+ const _separator = {
3610
+ ...DefaultListSeparatorBorder,
3611
+ ...separator
3612
+ };
3613
+
3614
+ separatorStyleArray.push(`border-color:${_separator.borderColor}`);
3615
+ separatorStyleArray.push(`border-width:${_separator.borderWidth}`);
3616
+ let borderStyle = '';
3617
+
3618
+ if (direction === 'horizontal') {
3619
+ borderStyle = index === 0
3620
+ ? `none ${_separator.borderStyle} none ${_separator.borderStyle}`
3621
+ : `none ${_separator.borderStyle} none none`;
3622
+ } else {
3623
+ borderStyle = index === 0
3624
+ ? `${_separator.borderStyle} none ${_separator.borderStyle} none`
3625
+ : `none none ${_separator.borderStyle} none`;
3595
3626
  }
3627
+
3628
+ separatorStyleArray.push(`border-style:${borderStyle}`);
3596
3629
  } else if (separator.type === "stripe") {
3597
3630
  const _separator = {
3598
3631
  ...DefaultListSeparatorStripe,
3599
3632
  ...separator
3600
3633
  };
3601
3634
 
3602
- separatorStyle = index % 2 === 0
3635
+ separatorStyleArray.push(index % 2 === 0
3603
3636
  ? `background:${_separator.background1}`
3604
- : `background-color:${_separator.background2}`;
3637
+ : `background-color:${_separator.background2}`);
3605
3638
  }
3606
3639
 
3607
- const sizeStyle = direction === 'horizontal'
3608
- ? `width:${size}`
3609
- : `height:${size}`;
3610
-
3611
- return [..._style.split(';'), ...separatorStyle.split(';'), sizeStyle.split(';')].join(';');
3640
+ return separatorStyleArray.join(';');
3612
3641
  })());
3613
3642
  }
3614
3643
  };
3615
3644
 
3616
- return [
3617
- style,
3618
- click,
3619
- size,
3620
- onClick,
3621
- clickEventName,
3622
- _style,
3623
- index,
3624
- length,
3625
- $$scope,
3626
- slots
3627
- ];
3645
+ return [_style, listItemStyle, click, onClick, clickEventName, index, $$scope, slots];
3628
3646
  }
3629
3647
 
3630
3648
  class ListItem extends SvelteComponent {
3631
3649
  constructor(options) {
3632
3650
  super();
3633
-
3634
- init(
3635
- this,
3636
- options,
3637
- instance$4,
3638
- create_fragment$4,
3639
- safe_not_equal,
3640
- {
3641
- size: 2,
3642
- onClick: 3,
3643
- clickEventName: 4,
3644
- _style: 5
3645
- },
3646
- add_css$4
3647
- );
3651
+ init(this, options, instance$4, create_fragment$4, safe_not_equal, { onClick: 3, clickEventName: 4, _style: 0 }, add_css$4);
3648
3652
  }
3649
3653
  }
3650
3654
 
@@ -4075,4 +4079,4 @@ class ImageBlock extends SvelteComponent {
4075
4079
  }
4076
4080
  }
4077
4081
 
4078
- export { ACTION_CHANGE_STATE_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, ALL_ACTION_ID, Alignments, AnimationStyles, BackgroundSizes, Cursors, DefaultListItemSize, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorNone, DefaultListSeparatorStripe, DefaultModalPlacement, Directions, EmbedElement, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_MODAL_ROOT, LengthUnits, List, ListItem, MediaQueries, Modal, ModalPositions, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, actionId, applyCss, applyGlobalCss, close, closeAction, closeApp, closed, collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, getActionShadowRoot, getMarginStyle, getPositionStyle, getStoreState, getTransform, h, handleFocus, handleKeydown, hasSuffix, hashCode, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isPreview, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onDestroy, onScroll, onShow, onTime, opened, randStr, runScript, send_event, setAutoStart, setMiximumZindex, setPreviousFocus, setState, show, showAction, showModal, showOnScroll, showOnTime, state, states, stopped, toBr };
4082
+ export { ACTION_CHANGE_STATE_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, ALL_ACTION_ID, Alignments, AnimationStyles, BackgroundSizes, Cursors, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultListSeparatorStripe, DefaultModalPlacement, Directions, EmbedElement, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_MODAL_ROOT, LengthUnits, List, ListItem, MediaQueries, Modal, ModalPositions, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, actionId, applyCss, applyGlobalCss, close, closeAction, closeApp, closed, collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, getActionShadowRoot, getMarginStyle, getPositionStyle, getStoreState, getTransform, h, handleFocus, handleKeydown, hasSuffix, hashCode, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isPreview, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onDestroy, onScroll, onShow, onTime, opened, randStr, runScript, send_event, setAutoStart, setMiximumZindex, setPreviousFocus, setState, show, showAction, showModal, showOnScroll, showOnTime, state, states, stopped, toBr };
package/dist/index.es.d.ts CHANGED
@@ -196,9 +196,11 @@ type Cursor = typeof Cursors[number];
196
196
  declare const Overflows: string[];
197
197
  type Overflow = typeof Overflows[number];
198
198
  type Border = string;
199
+ type BorderStyle = string;
200
+ type BorderWidth = `${number}px`;
199
201
  type Style = string;
200
202
  type StateName = string;
201
- type ListSeparatorType = "none" | "border" | "stripe";
203
+ type ListSeparatorType = "none" | "border" | "stripe" | "gap";
202
204
  interface BaseListSeparator {
203
205
  type: ListSeparatorType;
204
206
  }
@@ -207,21 +209,26 @@ interface ListSeparatorNone extends BaseListSeparator {
207
209
  }
208
210
  interface ListSeparatorBorder extends BaseListSeparator {
209
211
  type: "border";
210
- border?: Border;
212
+ borderStyle: BorderStyle;
213
+ borderWidth?: BorderWidth;
214
+ borderColor?: Color;
211
215
  }
212
216
  interface ListSeparatorStripe extends BaseListSeparator {
213
217
  type: "stripe";
214
218
  background1?: Color;
215
219
  background2?: Color;
216
220
  }
217
- type ListSeparator = ListSeparatorNone | ListSeparatorBorder | ListSeparatorStripe;
218
- declare const DefaultListSeparatorNone: ListSeparatorNone;
219
- declare const DefaultListSeparatorBorder: ListSeparatorBorder;
220
- declare const DefaultListSeparatorStripe: ListSeparatorStripe;
221
- declare const DefaultListSeparator: ListSeparatorBorder;
221
+ interface ListSeparatorGap extends BaseListSeparator {
222
+ type: "gap";
223
+ gap: Length;
224
+ }
225
+ type ListSeparator = ListSeparatorNone | ListSeparatorBorder | ListSeparatorStripe | ListSeparatorGap;
226
+ declare const DefaultListSeparatorNone: Required<ListSeparatorNone>;
227
+ declare const DefaultListSeparatorBorder: Required<ListSeparatorBorder>;
228
+ declare const DefaultListSeparatorStripe: Required<ListSeparatorStripe>;
229
+ declare const DefaultListSeparatorGap: Required<ListSeparatorGap>;
230
+ declare const DefaultListSeparator: Required<ListSeparatorBorder>;
222
231
  type ListDirection = "vertical" | "horizontal";
223
- type ListItemSize = string;
224
- declare const DefaultListItemSize = "100%";
225
232
  type ListContext = {
226
233
  separator: ListSeparator;
227
234
  direction: ListDirection;
@@ -719,7 +726,7 @@ declare const collection: (config: {
719
726
  } | null | undefined, cb: (err: Error | null, items?: any) => void): void;
720
727
  set(key: string, value: string, cb: (err: Error | null) => void): void;
721
728
  };
722
- export { Store, getStoreState, isPreview, CustomVariables, CloseTrigger, ActionEventHandler, ALL_ACTION_ID, actionId, ACTION_SHOW_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_CHANGE_STATE_EVENT, state, states, opened, closed, maximumZindex, internalHandlers, customHandlers, destroyed, stopped, customVariables, setAutoStart, setState, initialize, finalize, send_event, setMiximumZindex, none, moveTo, linkTo, closeApp, runScript, execOnClickOperation, haveFunction, customAnimation, loadGlobalScript, applyGlobalCss, loadGlobalStyle, hashCode, NOOP, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, ScrollDirection, OnScrollContext, OnScrollFunction, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, Style, StateName, ListSeparatorNone, ListSeparatorBorder, ListSeparatorStripe, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorStripe, DefaultListSeparator, ListDirection, ListItemSize, DefaultListItemSize, ListContext, hideOnScroll, hideOnTime, showOnScroll, showOnTime, ActionProps, ActionOptions, create, dispatchDestroyEvent, destroy, showAction, closeAction, KARTE_ACTION_ROOT, KARTE_ACTION_RID, ensureActionRoot, onShow, onClose, onDestroy, onChangeState, h, createFog, EmbedLogic, embed, getActionShadowRoot, applyCss, loadStyle, showModal, ModalOptions, KARTE_MODAL_ROOT, ensureModalRoot, show, close, AppOptions, App, createApp, collection };
729
+ export { Store, getStoreState, isPreview, CustomVariables, CloseTrigger, ActionEventHandler, ALL_ACTION_ID, actionId, ACTION_SHOW_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_CHANGE_STATE_EVENT, state, states, opened, closed, maximumZindex, internalHandlers, customHandlers, destroyed, stopped, customVariables, setAutoStart, setState, initialize, finalize, send_event, setMiximumZindex, none, moveTo, linkTo, closeApp, runScript, execOnClickOperation, haveFunction, customAnimation, loadGlobalScript, applyGlobalCss, loadGlobalStyle, hashCode, NOOP, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, ScrollDirection, OnScrollContext, OnScrollFunction, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, ClipPath, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Border, BorderStyle, BorderWidth, Style, StateName, ListSeparatorNone, ListSeparatorBorder, ListSeparatorStripe, ListSeparatorGap, ListSeparator, DefaultListSeparatorNone, DefaultListSeparatorBorder, DefaultListSeparatorStripe, DefaultListSeparatorGap, DefaultListSeparator, ListDirection, ListContext, hideOnScroll, hideOnTime, showOnScroll, showOnTime, ActionProps, ActionOptions, create, dispatchDestroyEvent, destroy, showAction, closeAction, KARTE_ACTION_ROOT, KARTE_ACTION_RID, ensureActionRoot, onShow, onClose, onDestroy, onChangeState, h, createFog, EmbedLogic, embed, getActionShadowRoot, applyCss, loadStyle, showModal, ModalOptions, KARTE_MODAL_ROOT, ensureModalRoot, show, close, AppOptions, App, createApp, collection };
723
730
  export { default as State } from './components/State.svelte';
724
731
  export { default as StateItem } from './components/StateItem.svelte';
725
732
  export { default as Modal } from './components/Modal.svelte';
package/dist/index.es.js CHANGED
@@ -563,15 +563,20 @@ const DefaultListSeparatorNone = {
563
563
  };
564
564
  const DefaultListSeparatorBorder = {
565
565
  type: 'border',
566
- border: 'solid 1px rgba(0, 0, 0, 0.06)',
566
+ borderStyle: 'solid',
567
+ borderWidth: '1px',
568
+ borderColor: 'rgba(0, 0, 0, 0.06)',
567
569
  };
568
570
  const DefaultListSeparatorStripe = {
569
571
  type: 'stripe',
570
572
  background1: 'rgba(0, 0, 0, 0.06)',
571
573
  background2: '#fff',
572
574
  };
575
+ const DefaultListSeparatorGap = {
576
+ type: 'gap',
577
+ gap: '8px',
578
+ };
573
579
  const DefaultListSeparator = DefaultListSeparatorBorder;
574
- const DefaultListItemSize = '100%';
575
580
 
576
581
  function doPresent({ direction, deltaRate }, downFn, upFn, condition = false) {
577
582
  if (direction === 'down' && deltaRate > 0) {
@@ -3224,12 +3229,11 @@ class ImageElement extends SvelteComponent {
3224
3229
  /* src/components/List.svelte generated by Svelte v3.53.1 */
3225
3230
 
3226
3231
  function add_css$5(target) {
3227
- append_styles(target, "svelte-cp9c9x", ".list.svelte-cp9c9x{display:flex;width:100%;height:100%;overflow:hidden}._vertical.svelte-cp9c9x{flex-direction:column}._horizontal.svelte-cp9c9x{flex-direction:row}");
3232
+ append_styles(target, "svelte-8kb8s9", ".list.svelte-8kb8s9{display:flex;width:100%;height:100%;overflow:hidden}");
3228
3233
  }
3229
3234
 
3230
3235
  function create_fragment$5(ctx) {
3231
3236
  let div;
3232
- let div_class_value;
3233
3237
  let current;
3234
3238
  const default_slot_template = /*#slots*/ ctx[5].default;
3235
3239
  const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[4], null);
@@ -3238,8 +3242,8 @@ function create_fragment$5(ctx) {
3238
3242
  c() {
3239
3243
  div = element("div");
3240
3244
  if (default_slot) default_slot.c();
3241
- attr(div, "class", div_class_value = "" + (null_to_empty(`list _${/*direction*/ ctx[0]}`) + " svelte-cp9c9x"));
3242
- attr(div, "style", /*style*/ ctx[1]);
3245
+ attr(div, "class", "list svelte-8kb8s9");
3246
+ attr(div, "style", /*style*/ ctx[0]);
3243
3247
  },
3244
3248
  m(target, anchor) {
3245
3249
  insert(target, div, anchor);
@@ -3266,12 +3270,8 @@ function create_fragment$5(ctx) {
3266
3270
  }
3267
3271
  }
3268
3272
 
3269
- if (!current || dirty & /*direction*/ 1 && div_class_value !== (div_class_value = "" + (null_to_empty(`list _${/*direction*/ ctx[0]}`) + " svelte-cp9c9x"))) {
3270
- attr(div, "class", div_class_value);
3271
- }
3272
-
3273
- if (!current || dirty & /*style*/ 2) {
3274
- attr(div, "style", /*style*/ ctx[1]);
3273
+ if (!current || dirty & /*style*/ 1) {
3274
+ attr(div, "style", /*style*/ ctx[0]);
3275
3275
  }
3276
3276
  },
3277
3277
  i(local) {
@@ -3320,61 +3320,80 @@ function instance$5($$self, $$props, $$invalidate) {
3320
3320
  });
3321
3321
 
3322
3322
  $$self.$$set = $$props => {
3323
- if ('direction' in $$props) $$invalidate(0, direction = $$props.direction);
3323
+ if ('direction' in $$props) $$invalidate(1, direction = $$props.direction);
3324
3324
  if ('separator' in $$props) $$invalidate(2, separator = $$props.separator);
3325
3325
  if ('_style' in $$props) $$invalidate(3, _style = $$props._style);
3326
3326
  if ('$$scope' in $$props) $$invalidate(4, $$scope = $$props.$$scope);
3327
3327
  };
3328
3328
 
3329
3329
  $$self.$$.update = () => {
3330
- if ($$self.$$.dirty & /*_style*/ 8) {
3331
- $$invalidate(1, style = _style);
3330
+ if ($$self.$$.dirty & /*separator, direction, _style*/ 14) {
3331
+ $$invalidate(0, style = (() => {
3332
+ let listStyleArray = [];
3333
+
3334
+ if (separator.type === 'gap') {
3335
+ listStyleArray.push(`gap:${separator.gap ?? DefaultListSeparatorGap.gap}`);
3336
+ }
3337
+
3338
+ if (direction === 'vertical') {
3339
+ listStyleArray.push('flex-direction: column');
3340
+ } else if (direction === 'horizontal') {
3341
+ listStyleArray.push('flex-direction: row');
3342
+ }
3343
+
3344
+ return [..._style.split(';'), ...listStyleArray].join(';');
3345
+ })());
3332
3346
  }
3333
3347
  };
3334
3348
 
3335
- return [direction, style, separator, _style, $$scope, slots];
3349
+ return [style, direction, separator, _style, $$scope, slots];
3336
3350
  }
3337
3351
 
3338
3352
  class List extends SvelteComponent {
3339
3353
  constructor(options) {
3340
3354
  super();
3341
- init(this, options, instance$5, create_fragment$5, safe_not_equal, { direction: 0, separator: 2, _style: 3 }, add_css$5);
3355
+ init(this, options, instance$5, create_fragment$5, safe_not_equal, { direction: 1, separator: 2, _style: 3 }, add_css$5);
3342
3356
  }
3343
3357
  }
3344
3358
 
3345
3359
  /* src/components/ListItem.svelte generated by Svelte v3.53.1 */
3346
3360
 
3347
3361
  function add_css$4(target) {
3348
- append_styles(target, "svelte-1rlujzj", ".list-item.svelte-1rlujzj{flex:none;box-sizing:border-box;min-width:0;min-height:0}");
3362
+ append_styles(target, "svelte-10nu2lu", ".list-item.svelte-10nu2lu{flex:auto;box-sizing:border-box;min-width:0;min-height:0;position:relative}.list-item-inner.svelte-10nu2lu{position:absolute;inset:0}");
3349
3363
  }
3350
3364
 
3351
3365
  function create_fragment$4(ctx) {
3352
- let div;
3366
+ let div1;
3367
+ let div0;
3353
3368
  let current;
3354
3369
  let mounted;
3355
3370
  let dispose;
3356
- const default_slot_template = /*#slots*/ ctx[9].default;
3357
- const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[8], null);
3371
+ const default_slot_template = /*#slots*/ ctx[7].default;
3372
+ const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[6], null);
3358
3373
 
3359
3374
  return {
3360
3375
  c() {
3361
- div = element("div");
3376
+ div1 = element("div");
3377
+ div0 = element("div");
3362
3378
  if (default_slot) default_slot.c();
3363
- attr(div, "class", "list-item svelte-1rlujzj");
3364
- attr(div, "style", /*style*/ ctx[0]);
3379
+ attr(div0, "class", "list-item-inner svelte-10nu2lu");
3380
+ attr(div0, "style", /*_style*/ ctx[0]);
3381
+ attr(div1, "class", "list-item svelte-10nu2lu");
3382
+ attr(div1, "style", /*listItemStyle*/ ctx[1]);
3365
3383
  },
3366
3384
  m(target, anchor) {
3367
- insert(target, div, anchor);
3385
+ insert(target, div1, anchor);
3386
+ append(div1, div0);
3368
3387
 
3369
3388
  if (default_slot) {
3370
- default_slot.m(div, null);
3389
+ default_slot.m(div0, null);
3371
3390
  }
3372
3391
 
3373
3392
  current = true;
3374
3393
 
3375
3394
  if (!mounted) {
3376
- dispose = listen(div, "click", function () {
3377
- if (is_function(/*click*/ ctx[1])) /*click*/ ctx[1].apply(this, arguments);
3395
+ dispose = listen(div1, "click", function () {
3396
+ if (is_function(/*click*/ ctx[2])) /*click*/ ctx[2].apply(this, arguments);
3378
3397
  });
3379
3398
 
3380
3399
  mounted = true;
@@ -3384,22 +3403,26 @@ function create_fragment$4(ctx) {
3384
3403
  ctx = new_ctx;
3385
3404
 
3386
3405
  if (default_slot) {
3387
- if (default_slot.p && (!current || dirty & /*$$scope*/ 256)) {
3406
+ if (default_slot.p && (!current || dirty & /*$$scope*/ 64)) {
3388
3407
  update_slot_base(
3389
3408
  default_slot,
3390
3409
  default_slot_template,
3391
3410
  ctx,
3392
- /*$$scope*/ ctx[8],
3411
+ /*$$scope*/ ctx[6],
3393
3412
  !current
3394
- ? get_all_dirty_from_scope(/*$$scope*/ ctx[8])
3395
- : get_slot_changes(default_slot_template, /*$$scope*/ ctx[8], dirty, null),
3413
+ ? get_all_dirty_from_scope(/*$$scope*/ ctx[6])
3414
+ : get_slot_changes(default_slot_template, /*$$scope*/ ctx[6], dirty, null),
3396
3415
  null
3397
3416
  );
3398
3417
  }
3399
3418
  }
3400
3419
 
3401
- if (!current || dirty & /*style*/ 1) {
3402
- attr(div, "style", /*style*/ ctx[0]);
3420
+ if (!current || dirty & /*_style*/ 1) {
3421
+ attr(div0, "style", /*_style*/ ctx[0]);
3422
+ }
3423
+
3424
+ if (!current || dirty & /*listItemStyle*/ 2) {
3425
+ attr(div1, "style", /*listItemStyle*/ ctx[1]);
3403
3426
  }
3404
3427
  },
3405
3428
  i(local) {
@@ -3412,7 +3435,7 @@ function create_fragment$4(ctx) {
3412
3435
  current = false;
3413
3436
  },
3414
3437
  d(detaching) {
3415
- if (detaching) detach(div);
3438
+ if (detaching) detach(div1);
3416
3439
  if (default_slot) default_slot.d(detaching);
3417
3440
  mounted = false;
3418
3441
  dispose();
@@ -3422,20 +3445,17 @@ function create_fragment$4(ctx) {
3422
3445
 
3423
3446
  function instance$4($$self, $$props, $$invalidate) {
3424
3447
  let click;
3425
- let style;
3448
+ let listItemStyle;
3426
3449
  let { $$slots: slots = {}, $$scope } = $$props;
3427
3450
  const { separator, direction, registerItem, unregisterItem } = getContext(LIST_CONTEXT_KEY);
3428
3451
  let index = 0;
3429
- let length = 0;
3430
3452
 
3431
3453
  const id = registerItem({
3432
3454
  onMount({ index: _index, length: _length }) {
3433
- $$invalidate(6, index = _index);
3434
- $$invalidate(7, length = _length);
3455
+ $$invalidate(5, index = _index);
3435
3456
  }
3436
3457
  });
3437
3458
 
3438
- let { size = DefaultListItemSize } = $$props;
3439
3459
  let { onClick = { operation: 'none', args: [] } } = $$props;
3440
3460
  let { clickEventName = '' } = $$props;
3441
3461
  let { _style = '' } = $$props;
@@ -3445,16 +3465,15 @@ function instance$4($$self, $$props, $$invalidate) {
3445
3465
  });
3446
3466
 
3447
3467
  $$self.$$set = $$props => {
3448
- if ('size' in $$props) $$invalidate(2, size = $$props.size);
3449
3468
  if ('onClick' in $$props) $$invalidate(3, onClick = $$props.onClick);
3450
3469
  if ('clickEventName' in $$props) $$invalidate(4, clickEventName = $$props.clickEventName);
3451
- if ('_style' in $$props) $$invalidate(5, _style = $$props._style);
3452
- if ('$$scope' in $$props) $$invalidate(8, $$scope = $$props.$$scope);
3470
+ if ('_style' in $$props) $$invalidate(0, _style = $$props._style);
3471
+ if ('$$scope' in $$props) $$invalidate(6, $$scope = $$props.$$scope);
3453
3472
  };
3454
3473
 
3455
3474
  $$self.$$.update = () => {
3456
3475
  if ($$self.$$.dirty & /*clickEventName, onClick*/ 24) {
3457
- $$invalidate(1, click = () => {
3476
+ $$invalidate(2, click = () => {
3458
3477
  if (clickEventName) {
3459
3478
  send_event(clickEventName);
3460
3479
  }
@@ -3463,72 +3482,54 @@ function instance$4($$self, $$props, $$invalidate) {
3463
3482
  });
3464
3483
  }
3465
3484
 
3466
- if ($$self.$$.dirty & /*index, length, size, _style*/ 228) {
3467
- $$invalidate(0, style = (() => {
3468
- let separatorStyle = '';
3485
+ if ($$self.$$.dirty & /*index*/ 32) {
3486
+ $$invalidate(1, listItemStyle = (() => {
3487
+ let separatorStyleArray = [];
3469
3488
 
3470
3489
  if (separator.type === "border") {
3471
- if (index < length - 1) {
3472
- const _separator = {
3473
- ...DefaultListSeparatorBorder,
3474
- ...separator
3475
- };
3476
-
3477
- const side = direction === 'horizontal' ? 'right' : 'bottom';
3478
- separatorStyle = `border-${side}:${_separator.border}`;
3490
+ const _separator = {
3491
+ ...DefaultListSeparatorBorder,
3492
+ ...separator
3493
+ };
3494
+
3495
+ separatorStyleArray.push(`border-color:${_separator.borderColor}`);
3496
+ separatorStyleArray.push(`border-width:${_separator.borderWidth}`);
3497
+ let borderStyle = '';
3498
+
3499
+ if (direction === 'horizontal') {
3500
+ borderStyle = index === 0
3501
+ ? `none ${_separator.borderStyle} none ${_separator.borderStyle}`
3502
+ : `none ${_separator.borderStyle} none none`;
3503
+ } else {
3504
+ borderStyle = index === 0
3505
+ ? `${_separator.borderStyle} none ${_separator.borderStyle} none`
3506
+ : `none none ${_separator.borderStyle} none`;
3479
3507
  }
3508
+
3509
+ separatorStyleArray.push(`border-style:${borderStyle}`);
3480
3510
  } else if (separator.type === "stripe") {
3481
3511
  const _separator = {
3482
3512
  ...DefaultListSeparatorStripe,
3483
3513
  ...separator
3484
3514
  };
3485
3515
 
3486
- separatorStyle = index % 2 === 0
3516
+ separatorStyleArray.push(index % 2 === 0
3487
3517
  ? `background:${_separator.background1}`
3488
- : `background-color:${_separator.background2}`;
3518
+ : `background-color:${_separator.background2}`);
3489
3519
  }
3490
3520
 
3491
- const sizeStyle = direction === 'horizontal'
3492
- ? `width:${size}`
3493
- : `height:${size}`;
3494
-
3495
- return [..._style.split(';'), ...separatorStyle.split(';'), sizeStyle.split(';')].join(';');
3521
+ return separatorStyleArray.join(';');
3496
3522
  })());
3497
3523
  }
3498
3524
  };
3499
3525
 
3500
- return [
3501
- style,
3502
- click,
3503
- size,
3504
- onClick,
3505
- clickEventName,
3506
- _style,
3507
- index,
3508
- length,
3509
- $$scope,
3510
- slots
3511
- ];
3526
+ return [_style, listItemStyle, click, onClick, clickEventName, index, $$scope, slots];
3512
3527
  }
3513
3528
 
3514
3529
  class ListItem extends SvelteComponent {
3515
3530
  constructor(options) {
3516
3531
  super();
3517
-
3518
- init(
3519
- this,
3520
- options,
3521
- instance$4,
3522
- create_fragment$4,
3523
- safe_not_equal,
3524
- {
3525
- size: 2,
3526
- onClick: 3,
3527
- clickEventName: 4,
3528
- _style: 5
3529
- },
3530
- add_css$4
3531
- );
3532
+ init(this, options, instance$4, create_fragment$4, safe_not_equal, { onClick: 3, clickEventName: 4, _style: 0 }, add_css$4);
3532
3533
  }
3533
3534
  }
3534
3535
 
@@ -3904,4 +3905,4 @@ class ImageBlock extends SvelteComponent {
3904
3905
  }
3905
3906
  }
3906
3907
 
3907
- export { ACTION_CHANGE_STATE_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, ALL_ACTION_ID, Alignments, AnimationStyles, BackgroundSizes, Cursors, DefaultListItemSize, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorNone, DefaultListSeparatorStripe, DefaultModalPlacement, Directions, EmbedElement, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_MODAL_ROOT, LengthUnits, List, ListItem, MediaQueries, Modal, ModalPositions, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, actionId, applyCss, applyGlobalCss, close, closeAction, closeApp, closed, collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, getActionShadowRoot, getMarginStyle, getPositionStyle, getStoreState, getTransform, h, handleFocus, handleKeydown, hasSuffix, hashCode, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isPreview, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onDestroy, onScroll, onShow, onTime, opened, randStr, runScript, send_event, setAutoStart, setMiximumZindex, setPreviousFocus, setState, show, showAction, showModal, showOnScroll, showOnTime, state, states, stopped, toBr };
3908
+ export { ACTION_CHANGE_STATE_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, ALL_ACTION_ID, Alignments, AnimationStyles, BackgroundSizes, Cursors, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultListSeparatorStripe, DefaultModalPlacement, Directions, EmbedElement, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_MODAL_ROOT, LengthUnits, List, ListItem, MediaQueries, Modal, ModalPositions, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, actionId, applyCss, applyGlobalCss, close, closeAction, closeApp, closed, collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, getActionShadowRoot, getMarginStyle, getPositionStyle, getStoreState, getTransform, h, handleFocus, handleKeydown, hasSuffix, hashCode, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isPreview, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onDestroy, onScroll, onShow, onTime, opened, randStr, runScript, send_event, setAutoStart, setMiximumZindex, setPreviousFocus, setState, show, showAction, showModal, showOnScroll, showOnTime, state, states, stopped, toBr };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plaidev/karte-action-sdk",
3
- "version": "1.1.85",
3
+ "version": "1.1.86",
4
4
  "author": "Plaid Inc.",
5
5
  "license": "Apache-2.0",
6
6
  "module": "./dist/index.es.js",