@plaidev/karte-action-sdk 1.1.114 → 1.1.115-27927583.61884118

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js CHANGED
@@ -3,16 +3,13 @@ import { linear, elasticOut, cubicOut } from 'svelte/easing';
3
3
  import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, mount_component, insert, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, detach, empty, group_outros, check_outros, component_subscribe, element, attr, noop, listen, is_function, append, add_render_callback, create_in_transition, svg_element, binding_callbacks, destroy_each, text, set_data, null_to_empty, src_url_equal, set_style, run_all } from 'svelte/internal';
4
4
  import { setContext, getContext, createEventDispatcher, onMount, onDestroy as onDestroy$1 } from 'svelte';
5
5
 
6
- /**
7
- * @internal
8
- */
6
+ /** @internal */
9
7
  const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
10
- /**
11
- * @internal
12
- */
8
+ /** @internal */
13
9
  const isPreview = () => {
14
10
  return false;
15
11
  };
12
+ /** @internal */
16
13
  const handleFocus = (node) => (e) => {
17
14
  if (node) {
18
15
  // trap focus
@@ -27,12 +24,14 @@ const handleFocus = (node) => (e) => {
27
24
  e.preventDefault();
28
25
  }
29
26
  };
27
+ /** @internal */
30
28
  const setPreviousFocus = () => {
31
29
  const previously_focused = typeof document !== 'undefined' && document.activeElement;
32
30
  if (previously_focused) {
33
31
  previously_focused?.focus();
34
32
  }
35
33
  };
34
+ /** @internal */
36
35
  const handleKeydown = (handlers) => (e) => {
37
36
  if (handlers[e.key]) {
38
37
  handlers[e.key](e);
@@ -62,6 +61,7 @@ const TRANSFORM = {
62
61
  'bottom-right': [0, 0],
63
62
  none: [0, 0],
64
63
  };
64
+ /** @internal */
65
65
  const getPositionStyle = (position) => {
66
66
  const style = POSITION_STYLES[position];
67
67
  if (style != null) {
@@ -72,6 +72,7 @@ const getPositionStyle = (position) => {
72
72
  return POSITION_STYLES['center'];
73
73
  }
74
74
  };
75
+ /** @internal */
75
76
  const getTransform = (position) => {
76
77
  const transform = TRANSFORM[position];
77
78
  if (transform != null) {
@@ -82,6 +83,7 @@ const getTransform = (position) => {
82
83
  return TRANSFORM['center'];
83
84
  }
84
85
  };
86
+ /** @internal */
85
87
  const getMarginStyle = (margin) => {
86
88
  return `margin: ${margin?.top ?? 0} ${margin?.right ?? 0} ${margin?.bottom ?? 0} ${margin?.left ?? 0};`;
87
89
  };
@@ -92,6 +94,8 @@ const getMarginStyle = (margin) => {
92
94
  * @param fn - スクロール率が達したときに呼び出されるコールバック関数
93
95
  *
94
96
  * @returns スクロール率によって呼び出されるコールバックを停止する関数を返します
97
+ *
98
+ * @public
95
99
  */
96
100
  function onScroll(rate, fn) {
97
101
  const rates = Array.isArray(rate) ? rate : [rate];
@@ -178,17 +182,18 @@ function onScroll(rate, fn) {
178
182
  * @param fn - 指定した時間が経過後に呼び出されるコールバック関数
179
183
  *
180
184
  * @returns コールバックを呼び出すためのタイマーを停止する関数を返します
185
+ *
186
+ * @public
181
187
  */
182
188
  function onTime(time, fn) {
183
189
  const timeoutHandler = setTimeout(fn, time);
184
190
  return () => timeoutHandler && clearTimeout(timeoutHandler);
185
191
  }
192
+ /** @internal */
186
193
  function hasSuffix(value, suffix) {
187
194
  return new RegExp(`[0-9]${suffix}$`).test(value);
188
195
  }
189
- function toBr(text) {
190
- return text.replace(/\r?\n/g, '<br>');
191
- }
196
+ /** @internal */
192
197
  function randStr(digit = 8) {
193
198
  return Math.random().toString(32).substring(digit);
194
199
  }
@@ -197,6 +202,8 @@ function randStr(digit = 8) {
197
202
  * get store state value
198
203
  *
199
204
  * @deprecated 非推奨
205
+ *
206
+ * @internal
200
207
  */
201
208
  const getStoreState = get;
202
209
  /**
@@ -207,16 +214,23 @@ const actionSetting = writable({ autoStart: true });
207
214
  * {@link getActionSetting} function to get action setting.
208
215
  *
209
216
  * @returns Current action setting
217
+ *
218
+ * @internal
210
219
  */
211
220
  function getActionSetting() {
212
221
  return get(actionSetting);
213
222
  }
214
223
  /**
215
- * {@link setActionSetting} function to "update" action setting
224
+ * アクション設定を更新する
225
+ *
226
+ * @remarks
227
+ * アクションの自動起動 (autoStart) を設定できます。
228
+ *
229
+ * @param setting - 更新するアクション設定
216
230
  *
217
- * @param setting - Updated action setting
231
+ * @returns 新しいアクション設定
218
232
  *
219
- * @returns New action setting
233
+ * @public
220
234
  */
221
235
  function setActionSetting(setting) {
222
236
  actionSetting.update(current => {
@@ -228,6 +242,8 @@ function setActionSetting(setting) {
228
242
  }
229
243
  /**
230
244
  * {@link resetActionSetting} function to reset action setting
245
+ *
246
+ * @internal
231
247
  */
232
248
  function resetActionSetting() {
233
249
  actionSetting.set({ autoStart: true });
@@ -238,15 +254,23 @@ function resetActionSetting() {
238
254
  */
239
255
  const system = writable({});
240
256
  /**
241
- * {@link getSystem} function to get KARTE system config.
257
+ * KARTE の設定を取得する
258
+ *
259
+ * @remarks
260
+ * アクションが表示されて設定されるため、{@link onShow} フック関数で利用できます。
261
+ * 取得できる設定は、APIキー、接客ID、アクションショートIDなどです。
262
+ *
263
+ * @returns 現在の KARTE システムの設定を返します
242
264
  *
243
- * @returns Current karte system config
265
+ * @public
244
266
  */
245
267
  function getSystem() {
246
268
  return get(system);
247
269
  }
248
270
  /**
249
271
  * {@link setSystem} function to set KARTE system config.
272
+ *
273
+ * @internal
250
274
  */
251
275
  function setSystem(config) {
252
276
  system.set(config);
@@ -256,10 +280,17 @@ function setSystem(config) {
256
280
  *
257
281
  * This is exported becase of compatible interface for App.svelte.
258
282
  * Don't use directly.
283
+ *
284
+ * @internal
259
285
  */
260
286
  const state = writable('/');
261
287
  /**
262
- * {@link setState} function to set current state ID.
288
+ * 現在のステートを設定する
289
+ *
290
+ * @param stateId - 表示するステートID
291
+ * @param force - 強制的にステートを設定するフラグ。デフォルトは `false`
292
+ *
293
+ * @public
263
294
  */
264
295
  function setState$1(stateId, force = false) {
265
296
  if (!force && isPreview())
@@ -267,21 +298,30 @@ function setState$1(stateId, force = false) {
267
298
  state.set(stateId);
268
299
  }
269
300
  /**
270
- * {@link getState} function to get current state ID.
301
+ * 現在のステートを取得する
302
+ *
303
+ * @remarks
304
+ * アクションが表示されて設定されるため、{@link onShow} フック関数で利用できます。
271
305
  *
272
- * @returns Current state ID
306
+ * @returns 現在のステートID
307
+ *
308
+ * @public
273
309
  */
274
310
  function getState$1() {
275
311
  return get(state);
276
312
  }
277
313
  /**
278
314
  * Store to handle all state IDs
315
+ *
316
+ * @internal
279
317
  */
280
318
  const states = writable([]);
281
319
  /**
282
320
  * {@link getStates} function to add new state ID to list of state IDs.
283
321
  *
284
322
  * @param stateId - New state ID
323
+ *
324
+ * @internal
285
325
  */
286
326
  function addState(stateId) {
287
327
  states.update(current => {
@@ -290,27 +330,38 @@ function addState(stateId) {
290
330
  });
291
331
  }
292
332
  /**
293
- * {@link getStates} function to get a list of all state IDs.
333
+ * ステートID一覧を取得する
334
+ *
335
+ * @remarks
336
+ * アクションが表示されて設定されるため、{@link onShow} フック関数で利用できます。
294
337
  *
295
- * @returns All state IDs
338
+ * @returns すべてのステートID
339
+ *
340
+ * @public
296
341
  */
297
342
  function getStates() {
298
343
  return get(states);
299
344
  }
300
345
  /**
301
346
  * Store to handle visibility of action
347
+ *
348
+ * @internal
302
349
  */
303
350
  const opened = writable(true);
304
351
  /**
305
- * {@link isOpened} function to check if action is opened.
352
+ * アクションの表示・非表示の状態を取得する
306
353
  *
307
- * @returns Flag if action is opend / true: Opend, false: Not opened
354
+ * @returns アクションが表示されているときは `true`、非表示のときは `false` を返します。
355
+ *
356
+ * @public
308
357
  */
309
358
  function isOpened() {
310
359
  return get(opened);
311
360
  }
312
361
  /**
313
362
  * {@link setOpened} function to set if action is opened.
363
+ *
364
+ * @internal
314
365
  */
315
366
  function setOpened(on) {
316
367
  opened.set(on);
@@ -319,6 +370,8 @@ function setOpened(on) {
319
370
  * Store to handle visibility of action
320
371
  *
321
372
  * @deprecated 非推奨
373
+ *
374
+ * @internal
322
375
  */
323
376
  const closed = writable(false); // deprecated
324
377
  /**
@@ -327,6 +380,8 @@ const closed = writable(false); // deprecated
327
380
  * @returns Flag if action is closed / true: Closed, false: Not closed
328
381
  *
329
382
  * @deprecated 非推奨
383
+ *
384
+ * @internal
330
385
  */
331
386
  function isClosed() {
332
387
  return get(closed);
@@ -335,16 +390,22 @@ function isClosed() {
335
390
  * {@link setClosed} function to set if action is closed.
336
391
  *
337
392
  * @deprecated 非推奨
393
+ *
394
+ * @internal
338
395
  */
339
396
  function setClosed(on) {
340
397
  closed.set(on);
341
398
  }
342
399
  /**
343
400
  * Store to handle max z-index for grid items
401
+ *
402
+ * @internal
344
403
  */
345
404
  const maximumZindex = writable(0);
346
405
  /**
347
406
  * Set maximum z-index.
407
+ *
408
+ * @internal
348
409
  */
349
410
  const setMaximumZindex = (zindex) => {
350
411
  if (!zindex || zindex < get(maximumZindex))
@@ -354,23 +415,19 @@ const setMaximumZindex = (zindex) => {
354
415
  /**
355
416
  * Store to handle internal event handlers
356
417
  *
357
- * This is used internally.
418
+ * @internal
358
419
  */
359
420
  const internalHandlers = writable({});
360
421
  /**
361
422
  * {@link getInternalHandlers} function to get internal event handlers.
362
423
  *
363
424
  * @returns Current internal handlers
425
+ *
426
+ * @internal
364
427
  */
365
428
  function getInternalHandlers() {
366
429
  return get(internalHandlers);
367
430
  }
368
- /**
369
- * {@link setInternalHandlers} function to set internal event handlers.
370
- */
371
- function setInternalHandlers(handlers) {
372
- internalHandlers.set(handlers);
373
- }
374
431
  /**
375
432
  * {@link updateInternalHandlers} function to update internal event handlers.
376
433
  *
@@ -388,30 +445,41 @@ function updateInternalHandlers(handlers) {
388
445
  * Store to handle custom event handlers
389
446
  *
390
447
  * This is used internally.
448
+ *
449
+ * @internal
391
450
  */
392
451
  const customHandlers = writable({});
393
452
  /**
394
- * {@link getCustomHandlers} function to get custom event handlers.
453
+ * カスタムイベントハンドラーの一覧を取得する
454
+ *
455
+ * @returns 現在のカスタムイベントハンドラー
395
456
  *
396
- * @returns Current custom event handlers
457
+ * @public
397
458
  */
398
459
  function getCustomHandlers() {
399
460
  return get(customHandlers);
400
461
  }
401
462
  /**
402
- * {@link setCustomHandlers} function to set custom event handlers.
463
+ * カスタムイベントハンドラーを登録する
464
+ *
465
+ * @remarks
466
+ * 登録したカスタムイベントハンドラーは、ビジュアルエディタでアクション本体とのテキストボタンのクリック時の動作で利用できます。
467
+ *
468
+ * @param handlers - 登録するカスタムイベントハンドラー
403
469
  *
404
- * @param handlers - New custom event handlers
470
+ * @public
405
471
  */
406
472
  function setCustomHandlers(handlers) {
407
473
  customHandlers.set(handlers);
408
474
  }
409
475
  /**
410
- * {@link updateCustomHandlers} function to update custom event handlers.
476
+ * カスタムイベントハンドラーを更新する
477
+ *
478
+ * @param handlers - 対象となるカスタムイベントハンドラー
411
479
  *
412
- * @param handlers - Updated custom event handlers
480
+ * @returns 新しいカスタムイベントハンドラーを返します。
413
481
  *
414
- * @returns New custom event handlers
482
+ * @public
415
483
  */
416
484
  function updateCustomHandlers(handlers) {
417
485
  customHandlers.update(current => {
@@ -421,23 +489,32 @@ function updateCustomHandlers(handlers) {
421
489
  }
422
490
  /**
423
491
  * Store to handle destruction of action
492
+ *
493
+ * @internal
424
494
  */
425
495
  const destroyed = writable(false);
426
496
  /**
427
497
  * {@link isDestroyed} function to check if action is destroyed.
428
498
  *
429
499
  * @returns Flag if action is destoryed / true: Destroyed, false: Not Destroyed
500
+ *
501
+ * @internal
430
502
  */
431
503
  function isDestroyed() {
432
504
  return get(destroyed);
433
505
  }
434
506
  /**
435
- * {@link setDestroyed} function to set if action is destroyed. */
507
+ * {@link setDestroyed} function to set if action is destroyed.
508
+ *
509
+ * @internal
510
+ */
436
511
  function setDestroyed(on) {
437
512
  destroyed.set(on);
438
513
  }
439
514
  /**
440
515
  * Store to handle stopping action
516
+ *
517
+ * @internal
441
518
  */
442
519
  const stopped = writable(false);
443
520
  /**
@@ -450,6 +527,8 @@ function isStopped() {
450
527
  }
451
528
  /**
452
529
  * {@link setStopped} function to set if action is stopped.
530
+ *
531
+ * @internal
453
532
  */
454
533
  function setStopped(on) {
455
534
  {
@@ -458,30 +537,41 @@ function setStopped(on) {
458
537
  }
459
538
  /**
460
539
  * Store to handle custom variables
540
+ *
541
+ * @internal
461
542
  */
462
543
  const customVariables = writable({});
463
544
  /**
464
- * {@link getCustomVariables} function to get custom variables.
545
+ * カスタム変数の一覧を取得する
465
546
  *
466
- * @returns Current custom variables
547
+ * @returns 現在のカスタム変数の一覧
548
+ *
549
+ * @public
467
550
  */
468
551
  function getCustomVariables() {
469
552
  return get(customVariables);
470
553
  }
471
554
  /**
472
- * {@link setCustomVariables} function to set custom variables.
555
+ * カスタム変数を設定する
556
+ *
557
+ * @remarks
558
+ * 設定した変数は、ビジュアルエディタのテキストフォームなどで利用できます。
473
559
  *
474
- * @param variables - New custom variables
560
+ * @param variables - カスタム変数
561
+ *
562
+ * @public
475
563
  */
476
564
  function setCustomVariables(variables) {
477
565
  customVariables.set(variables);
478
566
  }
479
567
  /**
480
- * {@link updateCustomVariables} function to update custom variables.
568
+ * カスタム変数を更新する
481
569
  *
482
- * @param variables - Updated custom variables
570
+ * @param variables - 更新するカスタム変数
483
571
  *
484
- * @returns New custom variables
572
+ * @returns 新しいカスタム変数を返します。
573
+ *
574
+ * @public
485
575
  */
486
576
  function updateCustomVariables(variables) {
487
577
  customVariables.update(current => {
@@ -491,21 +581,32 @@ function updateCustomVariables(variables) {
491
581
  }
492
582
  /**
493
583
  * Store for form data
584
+ *
585
+ * @internal
494
586
  */
495
587
  const formData = writable({});
496
588
 
589
+ /** @internal */
497
590
  const ALL_ACTION_ID = 'KARTE_ALL_ACTION_ID';
591
+ /** @internal */
498
592
  const ALL_ACTION_SHORTEN_ID = 'KARTE_ALL_ACTION_SHORTEN_ID';
593
+ /** @internal */
499
594
  const actionId = randStr();
595
+ /** @internal */
500
596
  const ACTION_SHOW_EVENT = `KARTE-ACTION-SHOW-${actionId}`;
597
+ /** @internal */
501
598
  const ACTION_CLOSE_EVENT = `KARTE-ACTION-CLOSE-${actionId}`;
599
+ /** @internal */
502
600
  const ACTION_DESTROY_EVENT = `KARTE-ACTION-DESTROY-${actionId}`;
601
+ /** @internal */
503
602
  const ACTION_CHANGE_STATE_EVENT = `KARTE-ACTION-CHANGE-STATE-${actionId}`;
603
+ /** @internal */
504
604
  const handleState = (event) => {
505
605
  if (event.detail.actionId === actionId || event.detail.actionId === ALL_ACTION_ID) {
506
606
  setState$1(event.detail.to, event.detail.force);
507
607
  }
508
608
  };
609
+ /** @internal */
509
610
  const initialize = (setting) => {
510
611
  const newSetting = setActionSetting(setting);
511
612
  if (newSetting.initialState) {
@@ -519,19 +620,21 @@ const initialize = (setting) => {
519
620
  setClosed(false); // deprecated
520
621
  return () => finalize();
521
622
  };
623
+ /** @internal */
522
624
  const finalize = () => {
523
625
  resetActionSetting();
524
626
  };
627
+ /** @internal */
525
628
  const send_event = (event_name, values) => {
526
629
  const setting = getActionSetting();
527
630
  setting?.send?.(event_name, values);
528
631
  };
529
- // eslint-disable-next-line @typescript-eslint/no-empty-function
530
- const none = () => () => { };
632
+ /** @internal */
531
633
  const moveTo = (to) => () => {
532
634
  send_event('_message_state_changed', { state: to });
533
635
  window.dispatchEvent(new CustomEvent(ACTION_CHANGE_STATE_EVENT, { detail: { to, actionId } }));
534
636
  };
637
+ /** @internal */
535
638
  const linkTo = (to, targetBlank = true) => () => {
536
639
  send_event('message_click', { url: to, state: getState$1() });
537
640
  if (targetBlank) {
@@ -541,9 +644,11 @@ const linkTo = (to, targetBlank = true) => () => {
541
644
  location.href = to;
542
645
  }
543
646
  };
647
+ /** @internal */
544
648
  const closeApp = (trigger) => () => {
545
649
  window.dispatchEvent(new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } }));
546
650
  };
651
+ /** @internal */
547
652
  const runScript = (handlerName) => () => {
548
653
  const handlers = get(customHandlers);
549
654
  const handler = handlers[handlerName];
@@ -556,6 +661,7 @@ const runScript = (handlerName) => () => {
556
661
  console.warn('Failed to run custom handler', handlerName, e);
557
662
  }
558
663
  };
664
+ /** @internal */
559
665
  const execOnClickOperation = (onClickOperation) => {
560
666
  if (onClickOperation.operation === 'linkTo') {
561
667
  linkTo(...onClickOperation.args)();
@@ -570,6 +676,7 @@ const execOnClickOperation = (onClickOperation) => {
570
676
  runScript(onClickOperation.args[0])();
571
677
  }
572
678
  };
679
+ /** @internal */
573
680
  const haveFunction = (onClickOperation) => {
574
681
  return onClickOperation.operation !== 'none';
575
682
  };
@@ -628,6 +735,8 @@ const EASING = {
628
735
  * @param customAnimationOptions - A custom animation option object
629
736
  *
630
737
  * @see {@link https://svelte.dev/docs#template-syntax-element-directives-transition-fn-custom-transition-functions| Custom transition functions} for detail documentation
738
+ *
739
+ * @internal
631
740
  */
632
741
  function customAnimation(node, { transform, animationStyle, delay = 0, duration = 1000 }) {
633
742
  const [x, y] = transform;
@@ -639,9 +748,11 @@ function customAnimation(node, { transform, animationStyle, delay = 0, duration
639
748
  };
640
749
  }
641
750
  /**
642
- * {@link loadGlobalScript} load JavaScript that does not support ESM.
751
+ * ES Modules に対応していない JavaScript をページに読み込む
643
752
  *
644
- * @param src - Link of JavaScript file
753
+ * @param src - JavaScript ファイルのリンク URL
754
+ *
755
+ * @public
645
756
  */
646
757
  async function loadGlobalScript(src) {
647
758
  return new Promise((resolve, reject) => {
@@ -653,9 +764,11 @@ async function loadGlobalScript(src) {
653
764
  });
654
765
  }
655
766
  /**
656
- * {@link applyGlobalCss} apply global CSS to WEB page.
767
+ * グローバル CSS をページに適用する
657
768
  *
658
769
  * @param css - CSS
770
+ *
771
+ * @public
659
772
  */
660
773
  async function applyGlobalCss(css) {
661
774
  return new Promise((resolve, reject) => {
@@ -667,9 +780,11 @@ async function applyGlobalCss(css) {
667
780
  });
668
781
  }
669
782
  /**
670
- * {@link loadGlobalStyle} load global style to WEB page.
783
+ * style ファイルをページに読み込む
671
784
  *
672
- * @param href - Link of style file
785
+ * @param href - style ファイルのリンク URL
786
+ *
787
+ * @public
673
788
  */
674
789
  async function loadGlobalStyle(href) {
675
790
  return new Promise((resolve, reject) => {
@@ -689,6 +804,8 @@ async function loadGlobalStyle(href) {
689
804
  * @returns Hashed string
690
805
  *
691
806
  * @see https://stackoverflow.com/a/22429679
807
+ *
808
+ * @internal
692
809
  */
693
810
  function hashCode(s) {
694
811
  const SEED = 0x41653150;
@@ -705,14 +822,158 @@ function hashCode(s) {
705
822
  * @param on - true: auto start, false: not auto start
706
823
  *
707
824
  * @deprecated 非推奨。`setActionConfig({ autoStart: false })` を使ってください。
825
+ *
826
+ * @internal
708
827
  */
709
828
  const setAutoStart = (on = true) => {
710
829
  setStopped(!on);
711
830
  };
712
831
 
832
+ function doPresent({ direction, deltaRate }, downFn, upFn, condition = false) {
833
+ if (direction === 'down' && deltaRate > 0) {
834
+ downFn();
835
+ }
836
+ else if (condition && direction === 'up' && deltaRate < 0) {
837
+ upFn();
838
+ }
839
+ return true;
840
+ }
841
+ /**
842
+ * スクロールに応じてアクションを非表示にするトリガー関数
843
+ *
844
+ * @remarks
845
+ * スクロール率が `hide_on_scroll_rate` に達したときに `hide` 関数を呼び出します。
846
+ * `show_on_scroll_reenter` が `true` で、かつ `hide_on_scroll_rate` またはその値以下の場合、アクションに対して `show` 関数が呼び出されます。
847
+ *
848
+ * @param props - アクションのプロパティ。プロパティには `hide_on_scroll`、`hide_on_scroll_rate` そして `show_on_scroll_reenter` が必要です。
849
+ * @param hide - アクションを非表示にするロジックが実装された関数。指定ない場合は noop 関数が使用されます。
850
+ * @param show - アクションを再び表示するロジックが実装された関数。指定ない場合は noop 関数が使用されます。
851
+ *
852
+ * @returns
853
+ * スクロールが開始された場合は、クリーンアップする関数を返します。そうでない場合は `null` を返します。
854
+ *
855
+ * @internal
856
+ */
857
+ function hideOnScroll(props, hide = NOOP, show = NOOP) {
858
+ const { hide_on_scroll, hide_on_scroll_rate, show_on_scroll_reenter } = props;
859
+ return hide_on_scroll && hide_on_scroll_rate
860
+ ? onScroll(hide_on_scroll_rate / 100, ctx => doPresent(ctx, hide, show, show_on_scroll_reenter))
861
+ : null;
862
+ }
863
+ /**
864
+ * 時間に応じてアクションを非表示にするトリガー関数
865
+ *
866
+ * @remarks
867
+ * 時間のカウントが `hide_on_time_count` に達したときに `hide` 関数を呼び出します。
868
+ *
869
+ * @param props - アクションのプロパティ。プロパティには `hide_on_time` そして `hide_on_time_count` が必要です。
870
+ * @param hide - アクションを非表示にするロジックが実装された関数。指定ない場合は noop 関数が使用されます。
871
+ *
872
+ * @returns
873
+ * タイマーが開始された場合、タイマーをクリーンアップする関数を返します。それ以外は `null` を返します。
874
+ *
875
+ * @internal
876
+ */
877
+ function hideOnTime(props, hide = NOOP) {
878
+ return props.hide_on_time && props.hide_on_time_count
879
+ ? onTime(props.hide_on_time_count * 1000, () => hide())
880
+ : null;
881
+ }
882
+ /**
883
+ * スクロールに応じてアクションを表示するトリガー関数
884
+ *
885
+ * @remarks
886
+ * スクロール率が `show_on_scroll_rate` に達したときに `show` 関数を呼び出します。
887
+ * `hide_on_scroll_releave` が `true` で、かつ `show_on_scroll_rate` 以下の場合は、アクションに対して `hide` 関数が呼び出されます。
888
+ *
889
+ * @param props - アクションのプロパティ。プロパティには `show_on_scroll`、`show_on_scroll_rate` そして `hide_on_scroll_releave` が必要です。
890
+ * @param show - アクションを表示するロジックが実装された関数。指定ない場合は noop 関数が使用されます。
891
+ * @param hide - アクションを非表示にするロジックが実装された関数。指定ない場合は noop 関数が使用されます。
892
+ *
893
+ * @returns
894
+ * スクロールが開始されている場合は、クリーンアップ関数を返します。そうでない場合は `null` を返します
895
+ *
896
+ * @internal
897
+ */
898
+ function showOnScroll(props, show = NOOP, hide = NOOP) {
899
+ const { show_on_scroll, show_on_scroll_rate, hide_on_scroll_releave } = props;
900
+ return show_on_scroll && show_on_scroll_rate
901
+ ? onScroll(show_on_scroll_rate / 100, ctx => doPresent(ctx, show, hide, hide_on_scroll_releave))
902
+ : null;
903
+ }
713
904
  /**
905
+ * 時間に応じてアクションを表示するトリガー関数
906
+ *
907
+ * @param props - アクションのプロパティ。プロパティには `show_on_time` そして `show_on_time_count` が必要です。
908
+ * @param show - アクションを表示するロジックが実装された関数。指定ない場合は noop 関数が使用されます。
909
+ *
910
+ * @remarks
911
+ * 時間のカウントが `show_on_time_count` に達したときに `show` 関数を呼び出します。
912
+ *
913
+ * @returns
914
+ * タイマーが開始された場合、タイマーをクリーンアップする関数を返します。それ以外は `null` を返します。
915
+ *
714
916
  * @internal
715
917
  */
918
+ function showOnTime(props, show = NOOP) {
919
+ return props.show_on_time && props.show_on_time_count
920
+ ? onTime(props.show_on_time_count * 1000, () => show())
921
+ : null;
922
+ }
923
+ /** @internal */
924
+ function and(fn, ...conditionFns) {
925
+ return checkAndDo((conditions, idx) => {
926
+ conditions[idx] = true;
927
+ return conditions.every(t => t == null || t);
928
+ }, fn, ...conditionFns);
929
+ }
930
+ /** @internal */
931
+ function or(fn, ...conditionFns) {
932
+ return checkAndDo((conditions, idx) => {
933
+ if (conditions.some(t => t)) {
934
+ return conditions[idx]; // this is true when show_on_scroll_reenter is true
935
+ }
936
+ conditions[idx] = true;
937
+ return true;
938
+ }, fn, ...conditionFns);
939
+ }
940
+ function checkAndDo(checkFn, fn, ...conditionFns) {
941
+ let initialized = false;
942
+ const checkBeforeInitialized = [];
943
+ let haveCondition = true;
944
+ const conditions = Array(conditionFns.length).fill(null);
945
+ const checkAndDos = Array(conditionFns.length).fill(() => { });
946
+ const cleanups = Array(conditionFns.length).fill(null);
947
+ const generageCheckAndDo = (idx) => () => {
948
+ if (!initialized) {
949
+ checkBeforeInitialized.push(idx);
950
+ return;
951
+ }
952
+ if (!haveCondition || !checkFn(conditions, idx))
953
+ return;
954
+ fn && fn();
955
+ };
956
+ conditionFns.forEach((conditionFn, i) => {
957
+ const checkAndDo = generageCheckAndDo(i);
958
+ checkAndDos[i] = checkAndDo;
959
+ const cleanup = conditionFn(checkAndDo);
960
+ cleanups[i] = cleanup;
961
+ if (cleanup != null)
962
+ conditions[i] = false;
963
+ });
964
+ haveCondition = conditions.some(c => c !== null);
965
+ const cleanupAll = () => {
966
+ cleanups.forEach((cleanup, i) => {
967
+ cleanup && cleanup();
968
+ cleanups[i] = null;
969
+ });
970
+ };
971
+ initialized = true;
972
+ checkBeforeInitialized.forEach(i => checkAndDos[i]());
973
+ return haveCondition ? cleanupAll : null;
974
+ }
975
+
976
+ /** @internal */
716
977
  const PropTypes = [
717
978
  'BooleanKeyword',
718
979
  'NumberKeyword',
@@ -734,21 +995,15 @@ const PropTypes = [
734
995
  'ModalPlacement',
735
996
  'OnClick',
736
997
  ];
737
- /**
738
- * @internal
739
- */
998
+ /** @internal */
740
999
  const MediaQueries = {
741
1000
  PC: '(\\s*min-width\\s*:\\s*1025px\\s*)',
742
1001
  Tablet: '(\\s*min-width\\s*:\\s*897px)\\s+and\\s+(\\s*max-width\\s*:\\s*1024px\\s*)',
743
1002
  Mobile: '(\\s*max-width\\s*:\\s*896px\\s*)',
744
1003
  };
745
- /**
746
- * @internal
747
- */
1004
+ /** @internal */
748
1005
  const Directions = ['row', 'column'];
749
- /**
750
- * @internal
751
- */
1006
+ /** @internal */
752
1007
  const AnimationStyles = [
753
1008
  'none',
754
1009
  'fade',
@@ -758,9 +1013,7 @@ const AnimationStyles = [
758
1013
  'slide-left',
759
1014
  'slide-right',
760
1015
  ];
761
- /**
762
- * @internal
763
- */
1016
+ /** @internal */
764
1017
  const ModalPositions = [
765
1018
  'top-left',
766
1019
  'top-center',
@@ -773,9 +1026,7 @@ const ModalPositions = [
773
1026
  'bottom-right',
774
1027
  'none',
775
1028
  ];
776
- /**
777
- * @internal
778
- */
1029
+ /** @internal */
779
1030
  const DefaultModalPlacement = {
780
1031
  position: 'center',
781
1032
  margin: {
@@ -787,25 +1038,17 @@ const DefaultModalPlacement = {
787
1038
  backgroundOverlay: false,
788
1039
  backgroundClick: { operation: 'closeApp', args: ['overlay'] },
789
1040
  };
790
- /**
791
- * @internal
792
- */
1041
+ /** @internal */
793
1042
  const Elasticities = ['none', 'vertical', 'horizontal'];
794
- /**
795
- * @internal
796
- */
1043
+ /** @internal */
797
1044
  const ElasticityStyle = {
798
1045
  none: '',
799
1046
  vertical: 'height: 100%',
800
1047
  horizontal: 'width: 100%',
801
1048
  };
802
- /**
803
- * @internal
804
- */
1049
+ /** @internal */
805
1050
  const TextDirections = ['horizontal', 'vertical'];
806
- /**
807
- * @internal
808
- */
1051
+ /** @internal */
809
1052
  const OnClickOperationOptions = [
810
1053
  {
811
1054
  operation: 'none',
@@ -852,9 +1095,7 @@ const OnClickOperationOptions = [
852
1095
  ],
853
1096
  },
854
1097
  ];
855
- /**
856
- * @internal
857
- */
1098
+ /** @internal */
858
1099
  const FormOperationOptions = [
859
1100
  {
860
1101
  operation: 'submit',
@@ -884,101 +1125,61 @@ const FormOperationOptions = [
884
1125
  ],
885
1126
  },
886
1127
  ];
887
- /**
888
- * @internal
889
- */
1128
+ /** @internal */
890
1129
  const LengthUnits = ['px', 'em', 'rem', 'vw', 'fr', '%'];
891
- /**
892
- * @internal
893
- */
1130
+ /** @internal */
894
1131
  const Justifies = ['flex-start', 'center', 'flex-end'];
895
- /**
896
- * @internal
897
- */
1132
+ /** @internal */
898
1133
  const Alignments = ['flex-start', 'center', 'flex-end'];
899
- /**
900
- * @internal
901
- */
1134
+ /** @internal */
902
1135
  const ObjectFits = ['fill', 'contain', 'cover'];
903
- /**
904
- * @internal
905
- */
1136
+ /** @internal */
906
1137
  const ClipPaths = ['none', 'circle(closest-side)'];
907
- /**
908
- * @internal
909
- */
1138
+ /** @internal */
910
1139
  const Repeats = ['repeat', 'space', 'round', 'no-repeat'];
911
- /**
912
- * @internal
913
- */
1140
+ /** @internal */
914
1141
  const BackgroundSizes = ['cover', 'contain', 'auto'];
915
- /**
916
- * @internal
917
- */
1142
+ /** @internal */
918
1143
  const Cursors = ['default', 'pointer'];
919
- /**
920
- * @internal
921
- */
1144
+ /** @internal */
922
1145
  const Overflows = ['visible', 'auto', 'hidden'];
923
- /**
924
- * @internal
925
- */
1146
+ /** @internal */
926
1147
  const WritingModes = ['horizontal-tb', 'vertical-lr'];
927
- /**
928
- * @internal
929
- */
1148
+ /** @internal */
930
1149
  const ListSeparatorTypes = ['none', 'border', 'gap'];
931
- /**
932
- * @internal
933
- */
1150
+ /** @internal */
934
1151
  const DefaultListSeparatorNone = {
935
1152
  type: 'none',
936
1153
  };
937
- /**
938
- * @internal
939
- */
1154
+ /** @internal */
940
1155
  const DefaultListSeparatorBorder = {
941
1156
  type: 'border',
942
1157
  borderStyle: 'solid',
943
1158
  borderWidth: '1px',
944
1159
  borderColor: 'rgba(0, 0, 0, 0.06)',
945
1160
  };
946
- /**
947
- * @internal
948
- */
1161
+ /** @internal */
949
1162
  const DefaultListSeparatorGap = {
950
1163
  type: 'gap',
951
1164
  gap: '8px',
952
1165
  };
953
- /**
954
- * @internal
955
- */
1166
+ /** @internal */
956
1167
  const DefaultListSeparator = DefaultListSeparatorBorder;
957
- /**
958
- * @internal
959
- */
1168
+ /** @internal */
960
1169
  const ListBackgroundTypes = ['none', 'stripe'];
961
- /**
962
- * @internal
963
- */
1170
+ /** @internal */
964
1171
  const DefaultListBackgroundNone = {
965
1172
  type: 'none',
966
1173
  };
967
- /**
968
- * @internal
969
- */
1174
+ /** @internal */
970
1175
  const DefaultListBackgroundStripe = {
971
1176
  type: 'stripe',
972
1177
  background1: 'rgba(0, 0, 0, 0.06)',
973
1178
  background2: '#fff',
974
1179
  };
975
- /**
976
- * @internal
977
- */
1180
+ /** @internal */
978
1181
  const DefaultListBackground = DefaultListBackgroundNone;
979
- /**
980
- * @internal
981
- */
1182
+ /** @internal */
982
1183
  const ListDirections = ['vertical', 'horizontal'];
983
1184
  const DefaultSliderButton = {
984
1185
  type: 'icon',
@@ -994,147 +1195,88 @@ const DefaultSliderNavigationButton = {
994
1195
  colorActive: '#666',
995
1196
  };
996
1197
 
997
- function doPresent({ direction, deltaRate }, downFn, upFn, condition = false) {
998
- if (direction === 'down' && deltaRate > 0) {
999
- downFn();
1000
- }
1001
- else if (condition && direction === 'up' && deltaRate < 0) {
1002
- upFn();
1198
+ /**
1199
+ * アクションが作成 (create) される前にフックする関数
1200
+ *
1201
+ * @param fn - 呼び出されるフック関数
1202
+ *
1203
+ * @public
1204
+ */
1205
+ function onCreate(fn) {
1206
+ let { onCreateHandlers } = getInternalHandlers();
1207
+ if (!onCreateHandlers) {
1208
+ onCreateHandlers = [];
1003
1209
  }
1004
- return true;
1210
+ onCreateHandlers.push(fn);
1211
+ updateInternalHandlers({ onCreateHandlers });
1005
1212
  }
1006
1213
  /**
1007
- * スクロールに応じてアクションを非表示にするトリガー関数
1008
- *
1009
- * @remarks
1010
- * スクロール率が `hide_on_scroll_rate` に達したときに `hide` 関数を呼び出します。
1011
- * `show_on_scroll_reenter` が `true` で、かつ `hide_on_scroll_rate` またはその値以下の場合、アクションに対して `show` 関数が呼び出されます。
1214
+ * アクションが表示 (show) された後にフックする関数
1012
1215
  *
1013
- * @param props - アクションのプロパティ。プロパティには `hide_on_scroll`、`hide_on_scroll_rate` そして `show_on_scroll_reenter` が必要です。
1014
- * @param hide - アクションを非表示にするロジックが実装された関数。指定ない場合は noop 関数が使用されます。
1015
- * @param show - アクションを再び表示するロジックが実装された関数。指定ない場合は noop 関数が使用されます。
1216
+ * @param fn - 呼び出されるフック関数
1016
1217
  *
1017
- * @returns
1018
- * スクロールが開始された場合は、クリーンアップする関数を返します。そうでない場合は `null` を返します。
1218
+ * @public
1019
1219
  */
1020
- function hideOnScroll(props, hide = NOOP, show = NOOP) {
1021
- const { hide_on_scroll, hide_on_scroll_rate, show_on_scroll_reenter } = props;
1022
- return hide_on_scroll && hide_on_scroll_rate
1023
- ? onScroll(hide_on_scroll_rate / 100, ctx => doPresent(ctx, hide, show, show_on_scroll_reenter))
1024
- : null;
1220
+ function onShow(fn) {
1221
+ let { onShowHandlers } = getInternalHandlers();
1222
+ if (!onShowHandlers) {
1223
+ onShowHandlers = [];
1224
+ }
1225
+ onShowHandlers.push(fn);
1226
+ updateInternalHandlers({ onShowHandlers });
1025
1227
  }
1026
1228
  /**
1027
- * 時間に応じてアクションを非表示にするトリガー関数
1028
- *
1029
- * @remarks
1030
- * 時間のカウントが `hide_on_time_count` に達したときに `hide` 関数を呼び出します。
1229
+ * アクションがクローズ (close) される前にフックする関数
1031
1230
  *
1032
- * @param props - アクションのプロパティ。プロパティには `hide_on_time` そして `hide_on_time_count` が必要です。
1033
- * @param hide - アクションを非表示にするロジックが実装された関数。指定ない場合は noop 関数が使用されます。
1231
+ * @param fn - 呼び出されるフック関数
1034
1232
  *
1035
- * @returns
1036
- * タイマーが開始された場合、タイマーをクリーンアップする関数を返します。それ以外は `null` を返します。
1233
+ * @public
1037
1234
  */
1038
- function hideOnTime(props, hide = NOOP) {
1039
- return props.hide_on_time && props.hide_on_time_count
1040
- ? onTime(props.hide_on_time_count * 1000, () => hide())
1041
- : null;
1235
+ function onClose(fn) {
1236
+ let { onCloseHandlers } = getInternalHandlers();
1237
+ if (!onCloseHandlers) {
1238
+ onCloseHandlers = [];
1239
+ }
1240
+ onCloseHandlers.push(fn);
1241
+ updateInternalHandlers({ onCloseHandlers });
1042
1242
  }
1043
1243
  /**
1044
- * スクロールに応じてアクションを表示するトリガー関数
1045
- *
1046
- * @remarks
1047
- * スクロール率が `show_on_scroll_rate` に達したときに `show` 関数を呼び出します。
1048
- * `hide_on_scroll_releave` が `true` で、かつ `show_on_scroll_rate` 以下の場合は、アクションに対して `hide` 関数が呼び出されます。
1244
+ * アクションが破棄 (destroy) される前にフックする関数
1049
1245
  *
1050
- * @param props - アクションのプロパティ。プロパティには `show_on_scroll`、`show_on_scroll_rate` そして `hide_on_scroll_releave` が必要です。
1051
- * @param show - アクションを表示するロジックが実装された関数。指定ない場合は noop 関数が使用されます。
1052
- * @param hide - アクションを非表示にするロジックが実装された関数。指定ない場合は noop 関数が使用されます。
1246
+ * @param fn - 呼び出されるフック関数
1053
1247
  *
1054
- * @returns
1055
- * スクロールが開始されている場合は、クリーンアップ関数を返します。そうでない場合は `null` を返します
1248
+ * @public
1056
1249
  */
1057
- function showOnScroll(props, show = NOOP, hide = NOOP) {
1058
- const { show_on_scroll, show_on_scroll_rate, hide_on_scroll_releave } = props;
1059
- return show_on_scroll && show_on_scroll_rate
1060
- ? onScroll(show_on_scroll_rate / 100, ctx => doPresent(ctx, show, hide, hide_on_scroll_releave))
1061
- : null;
1250
+ function onDestroy(fn) {
1251
+ let { onDestoryHandlers } = getInternalHandlers();
1252
+ if (!onDestoryHandlers) {
1253
+ onDestoryHandlers = [];
1254
+ }
1255
+ onDestoryHandlers.push(fn);
1256
+ updateInternalHandlers({ onDestoryHandlers });
1062
1257
  }
1063
1258
  /**
1064
- * 時間に応じてアクションを表示するトリガー関数
1065
- *
1066
- * @param props - アクションのプロパティ。プロパティには `show_on_time` そして `show_on_time_count` が必要です。
1067
- * @param show - アクションを表示するロジックが実装された関数。指定ない場合は noop 関数が使用されます。
1259
+ * アクションのステートが変更された (changeState) 後にフックする関数
1068
1260
  *
1069
- * @remarks
1070
- * 時間のカウントが `show_on_time_count` に達したときに `show` 関数を呼び出します。
1261
+ * @param fn - 呼び出されるフック関数
1071
1262
  *
1072
- * @returns
1073
- * タイマーが開始された場合、タイマーをクリーンアップする関数を返します。それ以外は `null` を返します。
1263
+ * @public
1074
1264
  */
1075
- function showOnTime(props, show = NOOP) {
1076
- return props.show_on_time && props.show_on_time_count
1077
- ? onTime(props.show_on_time_count * 1000, () => show())
1078
- : null;
1079
- }
1080
- function and(fn, ...conditionFns) {
1081
- return checkAndDo((conditions, idx) => {
1082
- conditions[idx] = true;
1083
- return conditions.every(t => t == null || t);
1084
- }, fn, ...conditionFns);
1085
- }
1086
- function or(fn, ...conditionFns) {
1087
- return checkAndDo((conditions, idx) => {
1088
- if (conditions.some(t => t)) {
1089
- return conditions[idx]; // this is true when show_on_scroll_reenter is true
1090
- }
1091
- conditions[idx] = true;
1092
- return true;
1093
- }, fn, ...conditionFns);
1094
- }
1095
- function checkAndDo(checkFn, fn, ...conditionFns) {
1096
- let initialized = false;
1097
- const checkBeforeInitialized = [];
1098
- let haveCondition = true;
1099
- const conditions = Array(conditionFns.length).fill(null);
1100
- const checkAndDos = Array(conditionFns.length).fill(() => { });
1101
- const cleanups = Array(conditionFns.length).fill(null);
1102
- const generageCheckAndDo = (idx) => () => {
1103
- if (!initialized) {
1104
- checkBeforeInitialized.push(idx);
1105
- return;
1106
- }
1107
- if (!haveCondition || !checkFn(conditions, idx))
1108
- return;
1109
- fn && fn();
1110
- };
1111
- conditionFns.forEach((conditionFn, i) => {
1112
- const checkAndDo = generageCheckAndDo(i);
1113
- checkAndDos[i] = checkAndDo;
1114
- const cleanup = conditionFn(checkAndDo);
1115
- cleanups[i] = cleanup;
1116
- if (cleanup != null)
1117
- conditions[i] = false;
1118
- });
1119
- haveCondition = conditions.some(c => c !== null);
1120
- const cleanupAll = () => {
1121
- cleanups.forEach((cleanup, i) => {
1122
- cleanup && cleanup();
1123
- cleanups[i] = null;
1124
- });
1125
- };
1126
- initialized = true;
1127
- checkBeforeInitialized.forEach(i => checkAndDos[i]());
1128
- return haveCondition ? cleanupAll : null;
1265
+ function onChangeState(fn) {
1266
+ let { onChangeStateHandlers } = getInternalHandlers();
1267
+ if (!onChangeStateHandlers) {
1268
+ onChangeStateHandlers = [];
1269
+ }
1270
+ onChangeStateHandlers.push(fn);
1271
+ updateInternalHandlers({ onChangeStateHandlers });
1129
1272
  }
1130
-
1131
1273
  /**
1132
- * KARTE アクションを作成する
1274
+ * アクションを作成する
1133
1275
  *
1134
1276
  * @param App - Svelte コンポーネントのエントリポイント
1135
1277
  * @param options - {@link ActionOptions | オプション}
1136
1278
  *
1137
- * @returns KARTE アクションを破棄する関数
1279
+ * @returns アクションを破棄する関数
1138
1280
  *
1139
1281
  * @public
1140
1282
  */
@@ -1287,29 +1429,41 @@ function dispatchDestroyEvent() {
1287
1429
  window.dispatchEvent(event);
1288
1430
  }
1289
1431
  /**
1290
- * Destory KARTE action
1432
+ * アクションの破棄する
1433
+ *
1434
+ * @public
1291
1435
  */
1292
1436
  function destroy() {
1293
1437
  setDestroyed(true);
1294
1438
  dispatchDestroyEvent();
1295
1439
  }
1296
1440
  /**
1297
- * Show KARTE action
1441
+ * アクションを表示する
1442
+ *
1443
+ * @public
1298
1444
  */
1299
1445
  function showAction() {
1300
1446
  const event = new CustomEvent(ACTION_SHOW_EVENT);
1301
1447
  window.dispatchEvent(event);
1302
1448
  }
1303
1449
  /**
1304
- * Close KARTE action
1450
+ * アクションを閉じる
1451
+ *
1452
+ * @param trigger - 閉じた時のトリガー。デフォルト `'none'`
1453
+ *
1454
+ * @public
1305
1455
  */
1306
1456
  function closeAction(trigger = 'none') {
1307
1457
  const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
1308
1458
  window.dispatchEvent(event);
1309
1459
  }
1460
+ /** @internal */
1310
1461
  const KARTE_ACTION_ROOT = 'karte-action-root';
1462
+ /** @internal */
1311
1463
  const KARTE_ACTION_RID = 'karte-action-rid';
1464
+ /** @internal */
1312
1465
  const KARTE_ACTION_SHORTEN_ID = 'karte-action-id';
1466
+ /** @internal */
1313
1467
  function ensureActionRoot(useShadow = true) {
1314
1468
  const systemConfig = getSystem();
1315
1469
  const rootAttrs = {
@@ -1332,81 +1486,7 @@ function ensureActionRoot(useShadow = true) {
1332
1486
  return el;
1333
1487
  }
1334
1488
  }
1335
- /**
1336
- * アクションが作成 (create) される前にフックする
1337
- *
1338
- * @param fn - 呼び出されるフック関数
1339
- *
1340
- * @public
1341
- */
1342
- function onCreate(fn) {
1343
- let { onCreateHandlers } = getInternalHandlers();
1344
- if (!onCreateHandlers) {
1345
- onCreateHandlers = [];
1346
- }
1347
- onCreateHandlers.push(fn);
1348
- updateInternalHandlers({ onCreateHandlers });
1349
- }
1350
- /**
1351
- * アクションが表示 (show) された後にフックする
1352
- *
1353
- * @param fn - 呼び出されるフック関数
1354
- *
1355
- * @public
1356
- */
1357
- function onShow(fn) {
1358
- let { onShowHandlers } = getInternalHandlers();
1359
- if (!onShowHandlers) {
1360
- onShowHandlers = [];
1361
- }
1362
- onShowHandlers.push(fn);
1363
- updateInternalHandlers({ onShowHandlers });
1364
- }
1365
- /**
1366
- * アクションがクローズ (close) される前にフックする
1367
- *
1368
- * @param fn - 呼び出されるフック関数
1369
- *
1370
- * @public
1371
- */
1372
- function onClose(fn) {
1373
- let { onCloseHandlers } = getInternalHandlers();
1374
- if (!onCloseHandlers) {
1375
- onCloseHandlers = [];
1376
- }
1377
- onCloseHandlers.push(fn);
1378
- updateInternalHandlers({ onCloseHandlers });
1379
- }
1380
- /**
1381
- * アクションが破棄 (destroy) される前にフックする
1382
- *
1383
- * @param fn - 呼び出されるフック関数
1384
- *
1385
- * @public
1386
- */
1387
- function onDestroy(fn) {
1388
- let { onDestoryHandlers } = getInternalHandlers();
1389
- if (!onDestoryHandlers) {
1390
- onDestoryHandlers = [];
1391
- }
1392
- onDestoryHandlers.push(fn);
1393
- updateInternalHandlers({ onDestoryHandlers });
1394
- }
1395
- /**
1396
- * アクションのステートが変更された (changeState) 後にフックする
1397
- *
1398
- * @param fn - 呼び出されるフック関数
1399
- *
1400
- * @public
1401
- */
1402
- function onChangeState(fn) {
1403
- let { onChangeStateHandlers } = getInternalHandlers();
1404
- if (!onChangeStateHandlers) {
1405
- onChangeStateHandlers = [];
1406
- }
1407
- onChangeStateHandlers.push(fn);
1408
- updateInternalHandlers({ onChangeStateHandlers });
1409
- }
1489
+ /** @internal */
1410
1490
  const h = (type, props, ...children) => {
1411
1491
  const el = document.createElement(type);
1412
1492
  for (const key of Object.keys(props)) {
@@ -1427,6 +1507,8 @@ const h = (type, props, ...children) => {
1427
1507
  * create a fog element
1428
1508
  *
1429
1509
  * @deprecated 非推奨
1510
+ *
1511
+ * @internal
1430
1512
  */
1431
1513
  function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
1432
1514
  const root = ensureModalRoot(false);
@@ -1453,25 +1535,14 @@ function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, })
1453
1535
  root.appendChild(fog);
1454
1536
  return { fog, close };
1455
1537
  }
1456
- function embed(target, replace, embed_method) {
1457
- if (embed_method == 'replace') {
1458
- if (target.parentNode) {
1459
- target.parentNode.replaceChild(replace, target);
1460
- }
1461
- }
1462
- else if (embed_method == 'append') {
1463
- target.append(replace);
1464
- }
1465
- else if (embed_method == 'prepend') {
1466
- target.prepend(replace);
1467
- }
1468
- else if (embed_method == 'after') {
1469
- target.after(replace);
1470
- }
1471
- else if (embed_method == 'before') {
1472
- target.before(replace);
1473
- }
1474
- }
1538
+ /**
1539
+ * アクションの Shadow Root の Element を取得する
1540
+ *
1541
+ * @returns
1542
+ * アクションが Shadow Root を持つ場合は Shadow Root の Element 返します。ない場合は `null` を返します
1543
+ *
1544
+ * @public
1545
+ */
1475
1546
  function getActionShadowRoot() {
1476
1547
  const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
1477
1548
  if (!root || !root.shadowRoot) {
@@ -1480,11 +1551,13 @@ function getActionShadowRoot() {
1480
1551
  return root.shadowRoot;
1481
1552
  }
1482
1553
  /**
1483
- * KARTE アクションに CSS を適用する
1554
+ * アクションに CSS を適用する
1484
1555
  *
1485
1556
  * @param css - 適用する CSS
1486
1557
  *
1487
1558
  * @returns 適用された style 要素を返す Promise
1559
+ *
1560
+ * @public
1488
1561
  */
1489
1562
  async function applyCss(css) {
1490
1563
  return new Promise((resolve, reject) => {
@@ -1522,9 +1595,11 @@ async function fixFontFaceIssue(href, cssRules) {
1522
1595
  return [rules.join('\n'), fixedRules.join('\n')];
1523
1596
  }
1524
1597
  /**
1525
- * KARTE アクションにグローバルなスタイルをロードする
1598
+ * アクションにグローバルなスタイルを読み込む
1599
+ *
1600
+ * @param href - style ファイルのリンク URL
1526
1601
  *
1527
- * @param href - style ファイルのリンク先 URL
1602
+ * @public
1528
1603
  */
1529
1604
  async function loadStyle(href) {
1530
1605
  const sr = getActionShadowRoot();
@@ -1557,11 +1632,46 @@ async function loadStyle(href) {
1557
1632
  document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
1558
1633
  }
1559
1634
  // -------- The following codes are deprecated --------
1560
- const showModal = create; // @deprecated
1561
- const KARTE_MODAL_ROOT = 'karte-modal-root'; // @deprecated
1562
- const ensureModalRoot = ensureActionRoot; // @deprecated
1563
- const show = showAction; // deprecated
1564
- const close = closeAction; // deprecated
1635
+ /**
1636
+ * 非推奨です
1637
+ *
1638
+ * @deprecated 非推奨
1639
+ *
1640
+ * @internal
1641
+ */
1642
+ const showModal = create;
1643
+ /**
1644
+ * 非推奨です
1645
+ *
1646
+ * @deprecated 非推奨
1647
+ *
1648
+ * @internal
1649
+ */
1650
+ const KARTE_MODAL_ROOT = 'karte-modal-root';
1651
+ /**
1652
+ * 非推奨です
1653
+ *
1654
+ * @deprecated 非推奨
1655
+ *
1656
+ * @internal
1657
+ */
1658
+ const ensureModalRoot = ensureActionRoot;
1659
+ /**
1660
+ * 非推奨です
1661
+ *
1662
+ * @deprecated 非推奨
1663
+ *
1664
+ * @internal
1665
+ */
1666
+ const show = showAction;
1667
+ /**
1668
+ * 非推奨です
1669
+ *
1670
+ * @deprecated 非推奨
1671
+ *
1672
+ * @internal
1673
+ */
1674
+ const close = closeAction;
1565
1675
  /**
1566
1676
  * Create an application instance
1567
1677
  *
@@ -1571,6 +1681,8 @@ const close = closeAction; // deprecated
1571
1681
  * @returns A function to close the modal
1572
1682
  *
1573
1683
  * @deprecated 非推奨
1684
+ *
1685
+ * @internal
1574
1686
  */
1575
1687
  function createApp(App, options = {
1576
1688
  send: () => { },
@@ -1611,7 +1723,16 @@ function createApp(App, options = {
1611
1723
  };
1612
1724
  }
1613
1725
 
1614
- const collection$1 = (config) => {
1726
+ /**
1727
+ * アクションテーブルを管理するメソッドを取得する
1728
+ *
1729
+ * @param config - 設定情報
1730
+ *
1731
+ * @returns メソッドを返します
1732
+ *
1733
+ * @public
1734
+ */
1735
+ function collection$1(config) {
1615
1736
  const endpoint = config.endpoint || "https://t.karte.test/collection";
1616
1737
  const api_key = config.api_key;
1617
1738
  const table = config.table;
@@ -1650,7 +1771,7 @@ const collection$1 = (config) => {
1650
1771
  }, cb);
1651
1772
  },
1652
1773
  };
1653
- };
1774
+ }
1654
1775
  function request(url, data, cb) {
1655
1776
  const xhr = new XMLHttpRequest();
1656
1777
  xhr.onreadystatechange = () => {
@@ -4853,6 +4974,7 @@ class MovieVimeoElement extends SvelteComponent {
4853
4974
  }
4854
4975
  }
4855
4976
 
4977
+ /** @internal */
4856
4978
  function registerInput({ name, statePath, validator = () => true, initialValue, }) {
4857
4979
  const writableValue = {
4858
4980
  subscribe(run) {
@@ -4887,6 +5009,7 @@ function registerInput({ name, statePath, validator = () => true, initialValue,
4887
5009
  writableValue.set(initialValue);
4888
5010
  return writableValue;
4889
5011
  }
5012
+ /** @internal */
4890
5013
  function deleteValues(statePath) {
4891
5014
  formData.update(prev => {
4892
5015
  const targetNames = Object.entries(prev)
@@ -4898,6 +5021,7 @@ function deleteValues(statePath) {
4898
5021
  return { ...prev };
4899
5022
  });
4900
5023
  }
5024
+ /** @internal */
4901
5025
  const getValuesAreValidReader = statePath => ({
4902
5026
  subscribe(callback) {
4903
5027
  return formData.subscribe(formData => {
@@ -4933,6 +5057,7 @@ function formDataToEventValues(campaignId, formData) {
4933
5057
  },
4934
5058
  };
4935
5059
  }
5060
+ /** @internal */
4936
5061
  function submit() {
4937
5062
  const systemConfig = getSystem();
4938
5063
  const campaignId = systemConfig.campaignId;
@@ -6919,4 +7044,4 @@ class ImageBlock extends SvelteComponent {
6919
7044
  }
6920
7045
  }
6921
7046
 
6922
- export { ACTION_CHANGE_STATE_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, ALL_ACTION_ID, ALL_ACTION_SHORTEN_ID, Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSliderButton, DefaultSliderNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormButton, FormCheckBoxes, FormOperationOptions, FormRadioButtons, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_ACTION_SHORTEN_ID, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slider, SliderItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, actionId, actionSetting, addState, applyCss, applyGlobalCss, close, closeAction, closeApp, closed, collection$1 as collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, formData, getActionSetting, getActionShadowRoot, getCustomHandlers, getCustomVariables, getInternalHandlers, getMarginStyle, getPositionStyle, getState$1 as getState, getStates, getStoreState, getSystem, getTransform, h, handleFocus, handleKeydown, handleState, hasSuffix, hashCode, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isClosed, isDestroyed, isOpened, isPreview, isStopped, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, randStr, resetActionSetting, runScript, send_event, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setDestroyed, setInternalHandlers, setMaximumZindex, setOpened, setPreviousFocus, setState$1 as setState, setStopped, setSystem, show, showAction, showModal, showOnScroll, showOnTime, state, states, stopped, system, toBr, updateCustomHandlers, updateCustomVariables, updateInternalHandlers, widget };
7047
+ export { Alignments, AnimationStyles, BackgroundSizes, ClipPaths, Cursors, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, DefaultSliderButton, DefaultSliderNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, FormButton, FormCheckBoxes, FormOperationOptions, FormRadioButtons, FormSelect, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_MODAL_ROOT, LengthUnits, List, ListBackgroundTypes, ListDirections, ListItem, ListSeparatorTypes, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, Slider, SliderItem, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, applyCss, applyGlobalCss, close, closeAction, closed, collection$1 as collection, create, createApp, createFog, customHandlers, customVariables, destroy, destroyed, ensureModalRoot, finalize, formData, getActionShadowRoot, getCustomHandlers, getCustomVariables, getState$1 as getState, getStates, getStoreState, getSystem, hideOnScroll, hideOnTime, initialize, isClosed, isOpened, loadGlobalScript, loadGlobalStyle, loadStyle, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setState$1 as setState, show, showAction, showModal, showOnScroll, showOnTime, state, stopped, updateCustomHandlers, updateCustomVariables, widget };