@sbb-esta/lyne-elements 3.3.0 → 3.4.0

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 (147) hide show
  1. package/autocomplete/autocomplete-base-element.d.ts +3 -4
  2. package/autocomplete/autocomplete-base-element.d.ts.map +1 -1
  3. package/autocomplete/autocomplete-base-element.js +88 -83
  4. package/autocomplete/autocomplete.component.d.ts +0 -1
  5. package/autocomplete/autocomplete.component.d.ts.map +1 -1
  6. package/autocomplete/autocomplete.component.js +26 -26
  7. package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts +0 -2
  8. package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts.map +1 -1
  9. package/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js +34 -44
  10. package/checkbox/checkbox-panel/checkbox-panel.component.d.ts +3 -2
  11. package/checkbox/checkbox-panel/checkbox-panel.component.d.ts.map +1 -1
  12. package/checkbox/checkbox-panel/checkbox-panel.component.js +36 -33
  13. package/core/i18n/i18n.d.ts +5 -0
  14. package/core/i18n/i18n.d.ts.map +1 -1
  15. package/core/i18n/i18n.js +108 -84
  16. package/core/i18n.js +84 -80
  17. package/core/mixins/element-internals-mixin.js +1 -1
  18. package/core/mixins/form-associated-input-mixin.d.ts +1 -0
  19. package/core/mixins/form-associated-input-mixin.d.ts.map +1 -1
  20. package/core/mixins/form-associated-input-mixin.js +2 -2
  21. package/core/mixins/form-associated-mixin.d.ts.map +1 -1
  22. package/core/mixins/form-associated-mixin.js +22 -16
  23. package/core/styles/core/mediaqueries.scss +1 -1
  24. package/core/styles/core.scss +34 -1
  25. package/core/styles/mixins/typo.scss +88 -41
  26. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss +530 -0
  27. package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss +1123 -0
  28. package/core.css +37 -7
  29. package/custom-elements.json +2063 -554
  30. package/date-input/date-input.component.d.ts +5 -0
  31. package/date-input/date-input.component.d.ts.map +1 -1
  32. package/date-input/date-input.component.js +7 -0
  33. package/development/autocomplete/autocomplete-base-element.d.ts +3 -4
  34. package/development/autocomplete/autocomplete-base-element.d.ts.map +1 -1
  35. package/development/autocomplete/autocomplete-base-element.js +30 -15
  36. package/development/autocomplete/autocomplete.component.d.ts +0 -1
  37. package/development/autocomplete/autocomplete.component.d.ts.map +1 -1
  38. package/development/autocomplete/autocomplete.component.js +16 -21
  39. package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts +0 -2
  40. package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.d.ts.map +1 -1
  41. package/development/autocomplete-grid/autocomplete-grid/autocomplete-grid.component.js +26 -35
  42. package/development/checkbox/checkbox-panel/checkbox-panel.component.d.ts +3 -2
  43. package/development/checkbox/checkbox-panel/checkbox-panel.component.d.ts.map +1 -1
  44. package/development/checkbox/checkbox-panel/checkbox-panel.component.js +10 -4
  45. package/development/core/i18n/i18n.d.ts +5 -0
  46. package/development/core/i18n/i18n.d.ts.map +1 -1
  47. package/development/core/i18n/i18n.js +38 -10
  48. package/development/core/i18n.js +5 -1
  49. package/development/core/mixins/element-internals-mixin.js +2 -2
  50. package/development/core/mixins/form-associated-input-mixin.d.ts +1 -0
  51. package/development/core/mixins/form-associated-input-mixin.d.ts.map +1 -1
  52. package/development/core/mixins/form-associated-input-mixin.js +3 -2
  53. package/development/core/mixins/form-associated-mixin.d.ts.map +1 -1
  54. package/development/core/mixins/form-associated-mixin.js +14 -7
  55. package/development/date-input/date-input.component.d.ts +5 -0
  56. package/development/date-input/date-input.component.d.ts.map +1 -1
  57. package/development/date-input/date-input.component.js +8 -1
  58. package/development/dialog/dialog-title/dialog-title.component.js +2 -6
  59. package/development/file-selector/common/file-selector-common.d.ts +2 -1
  60. package/development/file-selector/common/file-selector-common.d.ts.map +1 -1
  61. package/development/file-selector/common/file-selector-common.js +64 -19
  62. package/development/file-selector/common.js +1 -1
  63. package/development/file-selector/file-selector/file-selector.component.d.ts.map +1 -1
  64. package/development/file-selector/file-selector/file-selector.component.js +12 -17
  65. package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts +0 -7
  66. package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts.map +1 -1
  67. package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +32 -76
  68. package/development/{file-selector-common-csww18o8.js → file-selector-common-BxXdRZxt.js} +3 -3
  69. package/development/file-selector.js +1 -1
  70. package/development/form-field/form-field/form-field.component.d.ts +6 -3
  71. package/development/form-field/form-field/form-field.component.d.ts.map +1 -1
  72. package/development/form-field/form-field/form-field.component.js +4 -6
  73. package/development/header/common/header-action-common.js +4 -1
  74. package/development/navigation/common/navigation-action-common.js +5 -8
  75. package/development/navigation/navigation/navigation.component.js +21 -4
  76. package/development/navigation/navigation-marker/navigation-marker.component.js +5 -8
  77. package/development/navigation/navigation-section/navigation-section.component.js +6 -19
  78. package/development/notification/notification.component.js +1 -1
  79. package/development/option/option/option-base-element.d.ts.map +1 -1
  80. package/development/option/option/option-base-element.js +2 -1
  81. package/development/paginator/common/paginator-common.d.ts +3 -0
  82. package/development/paginator/common/paginator-common.d.ts.map +1 -1
  83. package/development/paginator/common/paginator-common.js +68 -10
  84. package/development/paginator/compact-paginator/compact-paginator.component.d.ts.map +1 -1
  85. package/development/paginator/compact-paginator/compact-paginator.component.js +8 -3
  86. package/development/paginator/paginator/paginator.component.d.ts +5 -0
  87. package/development/paginator/paginator/paginator.component.d.ts.map +1 -1
  88. package/development/paginator/paginator/paginator.component.js +28 -6
  89. package/development/sbb-tokens-CVLcOi-S.js +1 -1
  90. package/development/sidebar/sidebar-title/sidebar-title.component.js +1 -1
  91. package/development/tabs/tab-group/tab-group.component.js +3 -4
  92. package/development/time-input/time-input.component.d.ts +5 -0
  93. package/development/time-input/time-input.component.d.ts.map +1 -1
  94. package/development/time-input/time-input.component.js +8 -1
  95. package/development/title/title-base.js +14 -67
  96. package/development/title/title.component.js +17 -14
  97. package/development/toast/toast.component.js +6 -9
  98. package/development/toggle-check/toggle-check.component.d.ts +2 -2
  99. package/development/toggle-check/toggle-check.component.d.ts.map +1 -1
  100. package/development/toggle-check/toggle-check.component.js +4 -4
  101. package/development/train/train-wagon/train-wagon.component.js +6 -9
  102. package/dialog/dialog-title/dialog-title.component.js +1 -1
  103. package/file-selector/common/file-selector-common.d.ts +2 -1
  104. package/file-selector/common/file-selector-common.d.ts.map +1 -1
  105. package/file-selector/common/file-selector-common.js +88 -63
  106. package/file-selector/common.js +1 -1
  107. package/file-selector/file-selector/file-selector.component.d.ts.map +1 -1
  108. package/file-selector/file-selector/file-selector.component.js +26 -31
  109. package/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts +0 -7
  110. package/file-selector/file-selector-dropzone/file-selector-dropzone.component.d.ts.map +1 -1
  111. package/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +50 -74
  112. package/file-selector-common-Cn6U8goV.js +5 -0
  113. package/file-selector.js +1 -1
  114. package/form-field/form-field/form-field.component.d.ts +6 -3
  115. package/form-field/form-field/form-field.component.d.ts.map +1 -1
  116. package/form-field/form-field/form-field.component.js +3 -5
  117. package/header/common/header-action-common.js +1 -1
  118. package/navigation/common/navigation-action-common.js +8 -8
  119. package/navigation/navigation/navigation.component.js +1 -1
  120. package/navigation/navigation-marker/navigation-marker.component.js +1 -1
  121. package/navigation/navigation-section/navigation-section.component.js +14 -14
  122. package/notification/notification.component.js +1 -1
  123. package/option/option/option-base-element.d.ts.map +1 -1
  124. package/option/option/option-base-element.js +18 -18
  125. package/package.json +1 -1
  126. package/paginator/common/paginator-common.d.ts +3 -0
  127. package/paginator/common/paginator-common.d.ts.map +1 -1
  128. package/paginator/common/paginator-common.js +103 -63
  129. package/paginator/compact-paginator/compact-paginator.component.d.ts.map +1 -1
  130. package/paginator/compact-paginator/compact-paginator.component.js +13 -8
  131. package/paginator/paginator/paginator.component.d.ts +5 -0
  132. package/paginator/paginator/paginator.component.d.ts.map +1 -1
  133. package/paginator/paginator/paginator.component.js +77 -61
  134. package/sidebar/sidebar-title/sidebar-title.component.js +14 -14
  135. package/standard-theme.css +37 -7
  136. package/tabs/tab-group/tab-group.component.js +7 -7
  137. package/time-input/time-input.component.d.ts +5 -0
  138. package/time-input/time-input.component.d.ts.map +1 -1
  139. package/time-input/time-input.component.js +10 -3
  140. package/title/title-base.js +33 -33
  141. package/title/title.component.js +9 -9
  142. package/toast/toast.component.js +1 -1
  143. package/toggle-check/toggle-check.component.d.ts +2 -2
  144. package/toggle-check/toggle-check.component.d.ts.map +1 -1
  145. package/toggle-check/toggle-check.component.js +28 -28
  146. package/train/train-wagon/train-wagon.component.js +6 -6
  147. package/file-selector-common-Dw5d8vA4.js +0 -5
@@ -1,7 +1,7 @@
1
1
  import { LitElement, TemplateResult } from 'lit';
2
2
  import { SbbSecondaryButtonStaticElement } from '../../button.js';
3
3
  import { SbbLanguageController } from '../../core/controllers.js';
4
- import { FormRestoreReason, FormRestoreState, Constructor } from '../../core/mixins.js';
4
+ import { Constructor, FormRestoreReason, FormRestoreState } from '../../core/mixins.js';
5
5
  declare const SbbFileSelectorCommonElementMixinType_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbDisabledMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbFormAssociatedMixinType> & import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbElementInternalsMixinType> & typeof LitElement & import('../../core/mixins.js').SbbElementInternalsConstructor;
6
6
  export declare abstract class SbbFileSelectorCommonElementMixinType extends SbbFileSelectorCommonElementMixinType_base {
7
7
  accessor size: 's' | 'm';
@@ -16,6 +16,7 @@ export declare abstract class SbbFileSelectorCommonElementMixinType extends SbbF
16
16
  protected language: SbbLanguageController;
17
17
  protected abstract renderTemplate(input: TemplateResult): TemplateResult;
18
18
  protected createFileList(files: FileList): void;
19
+ protected getButtonLabel(): string;
19
20
  formResetCallback(): void;
20
21
  formStateRestoreCallback(state: FormRestoreState | null, reason: FormRestoreReason): void;
21
22
  }
@@ -1 +1 @@
1
- {"version":3,"file":"file-selector-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/file-selector/common/file-selector-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAMtD,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,iBAAiB,CAAC;AAEvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AASlE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAGrB,KAAK,WAAW,EAEjB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yCAAyC,CAAC;AACjD,OAAO,eAAe,CAAC;;AAEvB,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,qCAAsC,SAAQ,0CAE3E;IACC,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAChC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,YAAY,EAAE,SAAS,GAAG,YAAY,CAAC;IACvD,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,kBAAkB,EAAE,MAAM,CAAC;IAC3C,SAAgB,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;IACxC,IAAoB,KAAK,IAAI,MAAM,GAAG,IAAI,CAAC;IAC3C,IAAoB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE;IAChD,SAAS,CAAC,UAAU,EAAE,+BAA+B,CAAC;IACtD,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IAC1C,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc;IACxE,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI;IACxC,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;CACjG;AAGD,eAAO,MAAM,iCAAiC,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EACjF,YAAY,CAAC,KACZ,WAAW,CAAC,qCAAqC,CAAC,GAAG,CAkQvD,CAAC"}
1
+ {"version":3,"file":"file-selector-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/file-selector/common/file-selector-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAMtD,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,iBAAiB,CAAC;AAEvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAUlE,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAItB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,kCAAkC,CAAC;;AAE1C,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,qCAAsC,SAAQ,0CAE3E;IACC,SAAgB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAChC,SAAgB,QAAQ,EAAE,OAAO,CAAC;IAClC,SAAgB,YAAY,EAAE,SAAS,GAAG,YAAY,CAAC;IACvD,SAAgB,MAAM,EAAE,MAAM,CAAC;IAC/B,SAAgB,kBAAkB,EAAE,MAAM,CAAC;IAC3C,SAAgB,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;IACxC,IAAoB,KAAK,IAAI,MAAM,GAAG,IAAI,CAAC;IAC3C,IAAoB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE;IAChD,SAAS,CAAC,UAAU,EAAE,+BAA+B,CAAC;IACtD,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;IAC1C,SAAS,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc;IACxE,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI;IAC/C,SAAS,CAAC,cAAc,IAAI,MAAM;IAC3B,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;CACjG;AAGD,eAAO,MAAM,iCAAiC,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EACjF,YAAY,CAAC,KACZ,WAAW,CAAC,qCAAqC,CAAC,GAAG,CA+UvD,CAAC"}
@@ -1,35 +1,33 @@
1
- var W = (i) => {
2
- throw TypeError(i);
1
+ var q = (s) => {
2
+ throw TypeError(s);
3
3
  };
4
- var q = (i, l, r) => l.has(i) || W("Cannot " + r);
5
- var b = (i, l, r) => (q(i, l, "read from private field"), r ? r.call(i) : l.get(i)), g = (i, l, r) => l.has(i) ? W("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(i) : l.set(i, r), n = (i, l, r, u) => (q(i, l, "write to private field"), u ? u.call(i, r) : l.set(i, r), r);
4
+ var C = (s, l, r) => l.has(s) || q("Cannot " + r);
5
+ var b = (s, l, r) => (C(s, l, "read from private field"), r ? r.call(s) : l.get(s)), g = (s, l, r) => l.has(s) ? q("Cannot add the same private member more than once") : l instanceof WeakSet ? l.add(s) : l.set(s, r), n = (s, l, r, u) => (C(s, l, "write to private field"), u ? u.call(s, r) : l.set(s, r), r);
6
6
  import { __runInitializers as c, __esDecorate as o } from "tslib";
7
- import { nothing as z } from "lit";
7
+ import { nothing as L } from "lit";
8
8
  import { property as h } from "lit/decorators.js";
9
- import { ref as C } from "lit/directives/ref.js";
9
+ import { ref as j } from "lit/directives/ref.js";
10
10
  import { unsafeStatic as v, html as y } from "lit/static-html.js";
11
- import { sbbInputModalityDetector as j } from "../../core/a11y.js";
12
- import { SbbLanguageController as G } from "../../core/controllers.js";
13
- import { forceType as E } from "../../core/decorators.js";
14
- import { isLean as O } from "../../core/dom.js";
15
- import { forwardEvent as H } from "../../core/eventing.js";
16
- import { i18nFileSelectorCurrentlySelected as J, i18nFileSelectorDeleteFile as K, i18nFileSelectorButtonLabel as Q } from "../../core/i18n.js";
17
- import { SbbDisabledMixin as U, SbbFormAssociatedMixin as X, SbbElementInternalsMixin as Y } from "../../core/mixins.js";
11
+ import { sbbInputModalityDetector as G } from "../../core/a11y.js";
12
+ import { SbbLanguageController as O } from "../../core/controllers.js";
13
+ import { forceType as $ } from "../../core/decorators.js";
14
+ import { isLean as H } from "../../core/dom.js";
15
+ import { forwardEvent as J } from "../../core/eventing.js";
16
+ import { i18nFileSelectorButtonLabelMultiple as K, i18nFileSelectorButtonLabel as Q, i18nFileSelectorCurrentlySelected as U, i18nFileSelectorDeleteFile as X } from "../../core/i18n.js";
17
+ import { SbbDisabledMixin as Y, SbbFormAssociatedMixin as Z, SbbElementInternalsMixin as ee } from "../../core/mixins.js";
18
18
  import "../../button/secondary-button.js";
19
- import "../../button/secondary-button-static.js";
20
- import "../../icon.js";
21
- const _e = (i) => (() => {
22
- var d, f, p, m, _, a;
23
- let r = U(X(Y(i))), u = [], M, L = [], $ = [], F, x = [], I = [], R, k = [], A = [], B, T = [], w = [], P, D = [], S = [], N, V;
19
+ const me = (s) => (() => {
20
+ var d, f, p, _, m, a;
21
+ let r = Y(Z(ee(s))), u = [], M, z = [], F = [], k, D = [], x = [], A, I = [], R = [], B, S = [], T = [], P, w = [], N = [], W, V;
24
22
  return a = class extends r {
25
23
  constructor() {
26
24
  super(...arguments);
27
25
  g(this, d);
28
26
  g(this, f);
29
27
  g(this, p);
30
- g(this, m);
31
28
  g(this, _);
32
- n(this, d, (c(this, u), c(this, L, O() ? "s" : "m"))), n(this, f, (c(this, $), c(this, x, !1))), n(this, p, (c(this, I), c(this, k, "default"))), n(this, m, (c(this, A), c(this, T, ""))), n(this, _, (c(this, w), c(this, D, ""))), this._files = (c(this, S), []), this._suffixes = ["B", "kB", "MB", "GB", "TB"], this.language = new G(this);
29
+ g(this, m);
30
+ n(this, d, (c(this, u), c(this, z, H() ? "s" : "m"))), n(this, f, (c(this, F), c(this, D, !1))), n(this, p, (c(this, x), c(this, I, "default"))), n(this, _, (c(this, R), c(this, S, ""))), n(this, m, (c(this, T), c(this, w, ""))), this._files = (c(this, N), []), this._suffixes = ["B", "kB", "MB", "GB", "TB"], this.language = new O(this), this._counter = 0;
33
31
  }
34
32
  /**
35
33
  * Size variant, either s or m.
@@ -57,17 +55,17 @@ const _e = (i) => (() => {
57
55
  }
58
56
  /** A comma-separated list of allowed unique file type specifiers. */
59
57
  get accept() {
60
- return b(this, m);
58
+ return b(this, _);
61
59
  }
62
60
  set accept(t) {
63
- n(this, m, t);
61
+ n(this, _, t);
64
62
  }
65
63
  /** This will be forwarded as aria-label to the native input element. */
66
64
  get accessibilityLabel() {
67
- return b(this, _);
65
+ return b(this, m);
68
66
  }
69
67
  set accessibilityLabel(t) {
70
- n(this, _, t);
68
+ n(this, m, t);
71
69
  }
72
70
  /** The path of the first selected file. Empty string ('') if no file is selected */
73
71
  set value(t) {
@@ -80,7 +78,7 @@ const _e = (i) => (() => {
80
78
  set files(t) {
81
79
  this._files = t ?? [];
82
80
  const e = new DataTransfer();
83
- this.files.forEach((s) => e.items.add(s)), this._hiddenInput.files = e.files, this.updateFormValue();
81
+ this.files.forEach((i) => e.items.add(i)), this._hiddenInput.files = e.files, this.updateFormValue();
84
82
  }
85
83
  get files() {
86
84
  return this._files;
@@ -106,20 +104,24 @@ const _e = (i) => (() => {
106
104
  return t.name === e.name && t.size === e.size && t.lastModified === e.lastModified;
107
105
  }
108
106
  _onFocus() {
109
- j.mostRecentModality === "keyboard" && this.loadButton.toggleAttribute("data-focus-visible", !0);
107
+ G.mostRecentModality === "keyboard" && this.loadButton.toggleAttribute("data-focus-visible", !0);
110
108
  }
111
109
  _onBlur() {
112
110
  this.loadButton.removeAttribute("data-focus-visible");
113
111
  }
114
112
  _readFiles(t) {
115
113
  const e = t.target;
116
- e.files && this.createFileList(e.files), H(t, this);
114
+ e.files && this.createFileList(e.files), J(t, this);
117
115
  }
118
116
  createFileList(t) {
119
- !this.multiple || this.multipleMode !== "persistent" || this.files.length === 0 ? this.files = Array.from(t) : this.files = Array.from(t).filter(
117
+ const e = Array.from(t);
118
+ !this.multiple && t.length > 1 || this.accept && e.some((i) => !this.accept.split(",").some((E) => i.name.endsWith(E.trim()))) || (!this.multiple || this.multipleMode !== "persistent" || this.files.length === 0 ? this.files = e : this.files = e.filter(
120
119
  // Remove duplicates
121
- (e) => this.files.findIndex((s) => this._checkFileEquality(e, s)) === -1
122
- ).concat(this.files), this._updateA11yLiveRegion(), this._dispatchFileChangedEvent();
120
+ (i) => this.files.findIndex((E) => this._checkFileEquality(i, E)) === -1
121
+ ).concat(this.files), this._updateA11yLiveRegion(), this._dispatchFileChangedEvent());
122
+ }
123
+ getButtonLabel() {
124
+ return this.multiple ? K[this.language.current] : Q[this.language.current];
123
125
  }
124
126
  _removeFile(t) {
125
127
  this.files = this.files.filter((e) => !this._checkFileEquality(t, e)), this._updateA11yLiveRegion(), this.dispatchEvent(new InputEvent("input", {
@@ -140,7 +142,7 @@ const _e = (i) => (() => {
140
142
  return `${(t / Math.pow(1024, e)).toFixed(0)} ${this._suffixes[e]}`;
141
143
  }
142
144
  _updateA11yLiveRegion() {
143
- this._liveRegion.innerText = J(this.files.map((t) => t.name))[this.language.current];
145
+ this._liveRegion.innerText = U(this.files.map((t) => t.name))[this.language.current];
144
146
  }
145
147
  _renderFileList() {
146
148
  const t = this.files.length > 1 ? { WRAPPER: "ul", ELEMENT: "li" } : { WRAPPER: "div", ELEMENT: "span" };
@@ -156,63 +158,86 @@ const _e = (i) => (() => {
156
158
  size='${this.size}'
157
159
  icon-name='trash-small'
158
160
  @click='${() => this._removeFile(e)}'
159
- aria-label='${`${K[this.language.current]} - ${e.name}`}'
161
+ aria-label='${`${X[this.language.current]} - ${e.name}`}'
160
162
  ></sbb-secondary-button>
161
163
  </${v(t.ELEMENT)}>`)}
162
164
  </${v(t.WRAPPER)}>
163
165
  `;
164
166
  }
167
+ _onDragEnter(t) {
168
+ this._counter++, !this.disabled && !this.formDisabled && (this._setDragState(t.target, !0), this._blockEvent(t));
169
+ }
170
+ _onDragLeave(t) {
171
+ this._counter--, !this.disabled && !this.formDisabled && t.target === this._dragTarget && this._counter === 0 && (this._setDragState(), this._blockEvent(t));
172
+ }
173
+ _onFileDrop(t) {
174
+ this._counter = 0, !this.disabled && !this.formDisabled && (this._setDragState(), this._blockEvent(t), this.createFileList(t.dataTransfer.files));
175
+ }
176
+ _blockEvent(t) {
177
+ t.stopPropagation(), t.preventDefault();
178
+ }
179
+ _setDragState(t = void 0, e = !1) {
180
+ this._dragTarget = t, this.toggleState("active", e), this.loadButton.toggleAttribute("data-active", e);
181
+ }
165
182
  render() {
166
- const t = this.accessibilityLabel ? `${Q[this.language.current]} - ${this.accessibilityLabel}` : void 0;
183
+ const t = this.accessibilityLabel ? `${this.getButtonLabel()} - ${this.accessibilityLabel}` : void 0;
167
184
  return y`
168
185
  <div class="sbb-file-selector">
169
- ${this.renderTemplate(y`<input
170
- class="sbb-file-selector__visually-hidden"
171
- type="file"
172
- ?disabled="${this.disabled || this.formDisabled}"
173
- ?multiple="${this.multiple}"
174
- accept="${this.accept || z}"
175
- aria-label="${t || z}"
176
- @change="${this._readFiles}"
177
- @focus="${this._onFocus}"
178
- @blur="${this._onBlur}"
179
- ${C((e) => {
186
+ <div
187
+ class="sbb-file-selector__input-container"
188
+ @dragenter=${this._onDragEnter}
189
+ @dragover=${this._blockEvent}
190
+ @dragleave=${this._onDragLeave}
191
+ @drop=${this._onFileDrop}
192
+ >
193
+ ${this.renderTemplate(y`<input
194
+ class="sbb-file-selector__visually-hidden"
195
+ type="file"
196
+ ?disabled="${this.disabled || this.formDisabled}"
197
+ ?multiple="${this.multiple}"
198
+ accept="${this.accept || L}"
199
+ aria-label="${t || L}"
200
+ @change="${this._readFiles}"
201
+ @focus="${this._onFocus}"
202
+ @blur="${this._onBlur}"
203
+ ${j((e) => {
180
204
  this._hiddenInput = e;
181
205
  })}
182
- />`)}
206
+ />`)}
207
+ </div>
183
208
  <p
184
209
  role="status"
185
210
  class="sbb-file-selector__visually-hidden"
186
- ${C((e) => this._liveRegion = e)}
211
+ ${j((e) => this._liveRegion = e)}
187
212
  ></p>
188
- ${this.files.length > 0 ? this._renderFileList() : z}
213
+ ${this.files.length > 0 ? this._renderFileList() : L}
189
214
  <div class="sbb-file-selector__error">
190
215
  <slot name="error"></slot>
191
216
  </div>
192
217
  </div>
193
218
  `;
194
219
  }
195
- }, d = new WeakMap(), f = new WeakMap(), p = new WeakMap(), m = new WeakMap(), _ = new WeakMap(), (() => {
220
+ }, d = new WeakMap(), f = new WeakMap(), p = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), (() => {
196
221
  const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
197
- M = [h({ reflect: !0 })], F = [E(), h({ type: Boolean })], R = [h({ attribute: "multiple-mode" })], B = [E(), h()], P = [E(), h({ attribute: "accessibility-label" })], N = [h({ attribute: !1 })], V = [h({ attribute: !1 })], o(a, null, M, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, s) => {
198
- e.size = s;
199
- } }, metadata: t }, L, $), o(a, null, F, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (e) => "multiple" in e, get: (e) => e.multiple, set: (e, s) => {
200
- e.multiple = s;
201
- } }, metadata: t }, x, I), o(a, null, R, { kind: "accessor", name: "multipleMode", static: !1, private: !1, access: { has: (e) => "multipleMode" in e, get: (e) => e.multipleMode, set: (e, s) => {
202
- e.multipleMode = s;
203
- } }, metadata: t }, k, A), o(a, null, B, { kind: "accessor", name: "accept", static: !1, private: !1, access: { has: (e) => "accept" in e, get: (e) => e.accept, set: (e, s) => {
204
- e.accept = s;
205
- } }, metadata: t }, T, w), o(a, null, P, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (e) => "accessibilityLabel" in e, get: (e) => e.accessibilityLabel, set: (e, s) => {
206
- e.accessibilityLabel = s;
207
- } }, metadata: t }, D, S), o(a, null, N, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, s) => {
208
- e.value = s;
209
- } }, metadata: t }, null, u), o(a, null, V, { kind: "setter", name: "files", static: !1, private: !1, access: { has: (e) => "files" in e, set: (e, s) => {
210
- e.files = s;
222
+ M = [h({ reflect: !0 })], k = [$(), h({ type: Boolean })], A = [h({ attribute: "multiple-mode" })], B = [$(), h()], P = [$(), h({ attribute: "accessibility-label" })], W = [h({ attribute: !1 })], V = [h({ attribute: !1 })], o(a, null, M, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, i) => {
223
+ e.size = i;
224
+ } }, metadata: t }, z, F), o(a, null, k, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (e) => "multiple" in e, get: (e) => e.multiple, set: (e, i) => {
225
+ e.multiple = i;
226
+ } }, metadata: t }, D, x), o(a, null, A, { kind: "accessor", name: "multipleMode", static: !1, private: !1, access: { has: (e) => "multipleMode" in e, get: (e) => e.multipleMode, set: (e, i) => {
227
+ e.multipleMode = i;
228
+ } }, metadata: t }, I, R), o(a, null, B, { kind: "accessor", name: "accept", static: !1, private: !1, access: { has: (e) => "accept" in e, get: (e) => e.accept, set: (e, i) => {
229
+ e.accept = i;
230
+ } }, metadata: t }, S, T), o(a, null, P, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (e) => "accessibilityLabel" in e, get: (e) => e.accessibilityLabel, set: (e, i) => {
231
+ e.accessibilityLabel = i;
232
+ } }, metadata: t }, w, N), o(a, null, W, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
233
+ e.value = i;
234
+ } }, metadata: t }, null, u), o(a, null, V, { kind: "setter", name: "files", static: !1, private: !1, access: { has: (e) => "files" in e, set: (e, i) => {
235
+ e.files = i;
211
236
  } }, metadata: t }, null, u), t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
212
237
  })(), a.events = {
213
238
  filechanged: "filechanged"
214
239
  }, a;
215
240
  })();
216
241
  export {
217
- _e as SbbFileSelectorCommonElementMixin
242
+ me as SbbFileSelectorCommonElementMixin
218
243
  };
@@ -1,5 +1,5 @@
1
1
  import { SbbFileSelectorCommonElementMixin as m } from "./common/file-selector-common.js";
2
- import { f as r } from "../file-selector-common-Dw5d8vA4.js";
2
+ import { f as r } from "../file-selector-common-Cn6U8goV.js";
3
3
  export {
4
4
  m as SbbFileSelectorCommonElementMixin,
5
5
  r as fileSelectorCommonStyle
@@ -1 +1 @@
1
- {"version":3,"file":"file-selector.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/file-selector/file-selector/file-selector.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAU3E,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yCAAyC,CAAC;AACjD,OAAO,eAAe,CAAC;;AAEvB;;;;GAIG;AACH,qBAGM,sBAAuB,SAAQ,2BAA6C;IAChF,OAAuB,MAAM,EAAE,cAAc,CAA2B;IACxE,gBAAuB,MAAM;;MAElB;cAEQ,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc;CAmBzE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
1
+ {"version":3,"file":"file-selector.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/file-selector/file-selector/file-selector.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAS3E,OAAO,yCAAyC,CAAC;;AAEjD;;;;GAIG;AACH,qBAGM,sBAAuB,SAAQ,2BAA6C;IAChF,OAAuB,MAAM,EAAE,cAAc,CAA2B;IACxE,gBAAuB,MAAM;;MAElB;cAEQ,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc;CAiBzE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
@@ -1,44 +1,39 @@
1
1
  import { __esDecorate as m, __runInitializers as n } from "tslib";
2
2
  import { LitElement as c } from "lit";
3
3
  import { customElement as b } from "lit/decorators.js";
4
- import { ref as u } from "lit/directives/ref.js";
5
- import { html as d } from "lit/static-html.js";
4
+ import { ref as d } from "lit/directives/ref.js";
5
+ import { html as u } from "lit/static-html.js";
6
6
  import { slotState as f } from "../../core/decorators.js";
7
- import { i18nFileSelectorButtonLabel as p } from "../../core/i18n.js";
8
- import { SbbFileSelectorCommonElementMixin as S, fileSelectorCommonStyle as h } from "../common.js";
9
- import "../../button/secondary-button.js";
7
+ import { SbbFileSelectorCommonElementMixin as p, fileSelectorCommonStyle as h } from "../common.js";
10
8
  import "../../button/secondary-button-static.js";
11
- import "../../icon.js";
12
- let B = (() => {
13
- var e;
14
- let o = [b("sbb-file-selector"), f()], i, a = [], t, r = S(c);
15
- return e = class extends r {
9
+ let z = (() => {
10
+ var t;
11
+ let o = [b("sbb-file-selector"), f()], a, s = [], e, i = p(c);
12
+ return t = class extends i {
16
13
  renderTemplate(l) {
17
- return d`
18
- <div class="sbb-file-selector__input-container">
19
- <label>
20
- <sbb-secondary-button-static
21
- size=${this.size}
22
- icon-name="folder-open-small"
23
- ?disabled=${this.disabled || this.formDisabled}
24
- ${u((s) => {
25
- this.loadButton = s;
14
+ return u`
15
+ <label>
16
+ <sbb-secondary-button-static
17
+ size=${this.size}
18
+ icon-name="folder-open-small"
19
+ ?disabled=${this.disabled || this.formDisabled}
20
+ ${d((r) => {
21
+ this.loadButton = r;
26
22
  })}
27
- >
28
- ${p[this.language.current]}
29
- </sbb-secondary-button-static>
30
- ${l}
31
- </label>
32
- </div>
23
+ >
24
+ ${this.getButtonLabel()}
25
+ </sbb-secondary-button-static>
26
+ ${l}
27
+ </label>
33
28
  `;
34
29
  }
35
- }, t = e, (() => {
36
- const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
37
- m(null, i = { value: t }, o, { kind: "class", name: t.name, metadata: l }, null, a), t = i.value, l && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
38
- })(), e.styles = h, e.events = {
30
+ }, e = t, (() => {
31
+ const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
32
+ m(null, a = { value: e }, o, { kind: "class", name: e.name, metadata: l }, null, s), e = a.value, l && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
33
+ })(), t.styles = h, t.events = {
39
34
  filechanged: "filechanged"
40
- }, n(t, a), t;
35
+ }, n(e, s), e;
41
36
  })();
42
37
  export {
43
- B as SbbFileSelectorElement
38
+ z as SbbFileSelectorElement
44
39
  };
@@ -12,13 +12,6 @@ export declare class SbbFileSelectorDropzoneElement extends SbbFileSelectorDropz
12
12
  };
13
13
  /** The title displayed in `dropzone` variant. */
14
14
  accessor titleContent: string;
15
- private _counter;
16
- private _dragTarget?;
17
- private _blockEvent;
18
- private _onDragEnter;
19
- private _onDragLeave;
20
- private _onFileDrop;
21
- private _setDragState;
22
15
  protected renderTemplate(input: TemplateResult): TemplateResult;
23
16
  }
24
17
  declare global {
@@ -1 +1 @@
1
- {"version":3,"file":"file-selector-dropzone.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/file-selector/file-selector-dropzone/file-selector-dropzone.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAU3E,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yCAAyC,CAAC;AACjD,OAAO,eAAe,CAAC;;AAIvB;;;;GAIG;AACH,qBAGM,8BAA+B,SAAQ,mCAA6C;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAoC;IACjF,gBAAuB,MAAM;;MAElB;IAEX,iDAAiD;IACjD,SAEgB,YAAY,EAAE,MAAM,CAAM;IAI1C,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAc;IAElC,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,aAAa;cASF,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc;CAqCzE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,4BAA4B,EAAE,8BAA8B,CAAC;KAC9D;CACF"}
1
+ {"version":3,"file":"file-selector-dropzone.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/file-selector/file-selector-dropzone/file-selector-dropzone.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAa3E,OAAO,yCAAyC,CAAC;AACjD,OAAO,eAAe,CAAC;;AAIvB;;;;GAIG;AACH,qBAGM,8BAA+B,SAAQ,mCAA6C;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAoC;IACjF,gBAAuB,MAAM;;MAElB;IAEX,iDAAiD;IACjD,SAEgB,YAAY,EAAE,MAAM,CAAM;cAEvB,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc;CA+BzE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,4BAA4B,EAAE,8BAA8B,CAAC;KAC9D;CACF"}
@@ -1,97 +1,73 @@
1
- var p = (e) => {
1
+ var d = (e) => {
2
2
  throw TypeError(e);
3
3
  };
4
- var m = (e, i, s) => i.has(e) || p("Cannot " + s);
5
- var g = (e, i, s) => (m(e, i, "read from private field"), s ? s.call(e) : i.get(e)), _ = (e, i, s) => i.has(e) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, s), n = (e, i, s, r) => (m(e, i, "write to private field"), r ? r.call(e, s) : i.set(e, s), s);
6
- import { __runInitializers as b, __esDecorate as u } from "tslib";
4
+ var m = (e, t, i) => t.has(e) || d("Cannot " + i);
5
+ var u = (e, t, i) => (m(e, t, "read from private field"), i ? i.call(e) : t.get(e)), g = (e, t, i) => t.has(e) ? d("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, i), h = (e, t, i, s) => (m(e, t, "write to private field"), s ? s.call(e, i) : t.set(e, i), i);
6
+ import { __esDecorate as _, __runInitializers as n } from "tslib";
7
7
  import { css as y, LitElement as z } from "lit";
8
8
  import { customElement as x, property as S } from "lit/decorators.js";
9
- import { ref as D } from "lit/directives/ref.js";
9
+ import { ref as C } from "lit/directives/ref.js";
10
10
  import { html as k } from "lit/static-html.js";
11
- import { slotState as C, forceType as $ } from "../../core/decorators.js";
12
- import { i18nFileSelectorSubtitleLabel as E, i18nFileSelectorButtonLabel as F } from "../../core/i18n.js";
13
- import { SbbFileSelectorCommonElementMixin as L, fileSelectorCommonStyle as T } from "../common.js";
14
- import "../../button/secondary-button.js";
11
+ import { slotState as $, forceType as D } from "../../core/decorators.js";
12
+ import { i18nFileSelectorSubtitleLabelMultiple as E, i18nFileSelectorSubtitleLabel as w } from "../../core/i18n.js";
13
+ import { SbbFileSelectorCommonElementMixin as F, fileSelectorCommonStyle as L } from "../common.js";
15
14
  import "../../button/secondary-button-static.js";
16
15
  import "../../icon.js";
17
- const w = y`*,:before,:after{box-sizing:border-box}.sbb-file-selector__dropzone-area{display:flex;flex-direction:column;align-items:center;padding:var(--sbb-spacing-responsive-s);background-color:var(--sbb-file-selector-background-color);border:var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);border-radius:var(--sbb-border-radius-4x);transition-duration:var(--sbb-file-selector-transition-duration);transition-timing-function:var(--sbb-file-selector-transition-easing-function);transition-property:background-color,border-color}.sbb-file-selector__dropzone-area--icon{color:var(--sbb-file-selector-color);line-height:0}.sbb-file-selector__dropzone-area--title{--sbb-title-line-height: var(--sbb-typo-line-height-titles);--sbb-title-margin-block-start: 0;--sbb-title-margin-block-end: 0;margin:0;margin-block:var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height);letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);--sbb-title-font-size: var(--sbb-font-size-title-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);text-align:center;color:var(--sbb-file-selector-subtitle-color);margin-block-end:var(--sbb-spacing-fixed-4x)}`;
18
- let Q = (() => {
19
- var l, a;
20
- let e = [x("sbb-file-selector-dropzone"), C()], i, s = [], r, c = L(z), d, f = [], h = [];
21
- return a = class extends c {
16
+ const I = y`*,:before,:after{box-sizing:border-box}.sbb-file-selector__dropzone-area{display:flex;flex-direction:column;align-items:center;padding:var(--sbb-spacing-responsive-s);background-color:var(--sbb-file-selector-background-color);border:var(--sbb-border-width-1x) dashed var(--sbb-file-selector-border-color);border-radius:var(--sbb-border-radius-4x);transition-duration:var(--sbb-file-selector-transition-duration);transition-timing-function:var(--sbb-file-selector-transition-easing-function);transition-property:background-color,border-color}.sbb-file-selector__dropzone-area--icon{color:var(--sbb-file-selector-color);line-height:0}.sbb-file-selector__dropzone-area--title{--sbb-title-font-size: var(--sbb-title-font-size-level-6);--sbb-title-line-height: var(--sbb-typo-line-height-body-text);margin-block:var(--sbb-title-margin-block-start, 0) var(--sbb-title-margin-block-end, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-titles));letter-spacing:var(--sbb-typo-letter-spacing-titles);font-size:var(--sbb-title-font-size);text-align:center;color:var(--sbb-file-selector-color)}.sbb-file-selector__dropzone-area--subtitle{--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);text-align:center;color:var(--sbb-file-selector-subtitle-color);margin-block-end:var(--sbb-spacing-fixed-4x)}`;
17
+ let N = (() => {
18
+ var a, o;
19
+ let e = [x("sbb-file-selector-dropzone"), $()], t, i = [], s, b = F(z), c, f = [], p = [];
20
+ return o = class extends b {
22
21
  constructor() {
23
22
  super(...arguments);
24
- _(this, l);
25
- n(this, l, b(this, f, "")), this._counter = (b(this, h), 0);
23
+ g(this, a, n(this, f, ""));
24
+ n(this, p);
26
25
  }
27
26
  /** The title displayed in `dropzone` variant. */
28
27
  get titleContent() {
29
- return g(this, l);
28
+ return u(this, a);
30
29
  }
31
- set titleContent(t) {
32
- n(this, l, t);
30
+ set titleContent(r) {
31
+ h(this, a, r);
33
32
  }
34
- _blockEvent(t) {
35
- t.stopPropagation(), t.preventDefault();
36
- }
37
- _onDragEnter(t) {
38
- this._counter++, !this.disabled && !this.formDisabled && (this._setDragState(t.target, !0), this._blockEvent(t));
39
- }
40
- _onDragLeave(t) {
41
- this._counter--, !this.disabled && !this.formDisabled && t.target === this._dragTarget && this._counter === 0 && (this._setDragState(), this._blockEvent(t));
42
- }
43
- _onFileDrop(t) {
44
- this._counter = 0, !this.disabled && !this.formDisabled && (this._setDragState(), this._blockEvent(t), this.createFileList(t.dataTransfer.files));
45
- }
46
- _setDragState(t = void 0, o = !1) {
47
- this._dragTarget = t, this.toggleAttribute("data-active", o), this.loadButton.toggleAttribute("data-active", o);
48
- }
49
- renderTemplate(t) {
33
+ renderTemplate(r) {
50
34
  return k`
51
- <div
52
- class="sbb-file-selector__input-container"
53
- @dragenter=${this._onDragEnter}
54
- @dragover=${this._blockEvent}
55
- @dragleave=${this._onDragLeave}
56
- @drop=${this._onFileDrop}
57
- >
58
- <label>
59
- <span class="sbb-file-selector__dropzone-area">
60
- <span class="sbb-file-selector__dropzone-area--icon">
61
- <sbb-icon
62
- name=${this.size === "m" ? "folder-open-medium" : "folder-open-small"}
63
- ></sbb-icon>
64
- </span>
65
- <span class="sbb-file-selector__dropzone-area--title">${this.titleContent}</span>
66
- <span class="sbb-file-selector__dropzone-area--subtitle">
67
- ${E[this.language.current]}
68
- </span>
69
- <span class="sbb-file-selector__dropzone-area--button">
70
- <sbb-secondary-button-static
71
- size=${this.size}
72
- ?disabled=${this.disabled || this.formDisabled}
73
- ${D((o) => {
74
- this.loadButton = o;
35
+ <label>
36
+ <span class="sbb-file-selector__dropzone-area">
37
+ <span class="sbb-file-selector__dropzone-area--icon">
38
+ <sbb-icon
39
+ name=${this.size === "m" ? "folder-open-medium" : "folder-open-small"}
40
+ ></sbb-icon>
41
+ </span>
42
+ <span class="sbb-file-selector__dropzone-area--title">${this.titleContent}</span>
43
+ <span class="sbb-file-selector__dropzone-area--subtitle">
44
+ ${this.multiple ? E[this.language.current] : w[this.language.current]}
45
+ </span>
46
+ <span class="sbb-file-selector__dropzone-area--button">
47
+ <sbb-secondary-button-static
48
+ size=${this.size}
49
+ ?disabled=${this.disabled || this.formDisabled}
50
+ ${C((l) => {
51
+ this.loadButton = l;
75
52
  })}
76
- >
77
- ${F[this.language.current]}
78
- </sbb-secondary-button-static>
79
- </span>
53
+ >
54
+ ${this.getButtonLabel()}
55
+ </sbb-secondary-button-static>
80
56
  </span>
81
- ${t}
82
- </label>
83
- </div>
57
+ </span>
58
+ ${r}
59
+ </label>
84
60
  `;
85
61
  }
86
- }, l = new WeakMap(), r = a, (() => {
87
- const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
88
- d = [$(), S({ attribute: "title-content" })], u(a, null, d, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (o) => "titleContent" in o, get: (o) => o.titleContent, set: (o, v) => {
89
- o.titleContent = v;
90
- } }, metadata: t }, f, h), u(null, i = { value: r }, e, { kind: "class", name: r.name, metadata: t }, null, s), r = i.value, t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
91
- })(), a.styles = [T, w], a.events = {
62
+ }, a = new WeakMap(), s = o, (() => {
63
+ const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
64
+ c = [D(), S({ attribute: "title-content" })], _(o, null, c, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (l) => "titleContent" in l, get: (l) => l.titleContent, set: (l, v) => {
65
+ l.titleContent = v;
66
+ } }, metadata: r }, f, p), _(null, t = { value: s }, e, { kind: "class", name: s.name, metadata: r }, null, i), s = t.value, r && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
67
+ })(), o.styles = [L, I], o.events = {
92
68
  filechanged: "filechanged"
93
- }, b(r, s), r;
69
+ }, n(s, i), s;
94
70
  })();
95
71
  export {
96
- Q as SbbFileSelectorDropzoneElement
72
+ N as SbbFileSelectorDropzoneElement
97
73
  };
@@ -0,0 +1,5 @@
1
+ import { css as e } from "lit";
2
+ const i = e`*,:before,:after{box-sizing:border-box}:host{--sbb-file-selector-color: var(--sbb-color-black);--sbb-file-selector-subtitle-color: var(--sbb-color-granite);--sbb-file-selector-background-color: var(--sbb-color-white);--sbb-file-selector-border-color: var(--sbb-color-cloud);--sbb-file-selector-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);display:block;width:20rem}@media (forced-colors: active){:host(:disabled){--sbb-file-selector-color: GrayText;--sbb-file-selector-subtitle-color: GrayText;--sbb-file-selector-border-color: GrayText}}:host(:is(:state(active),[state--active])){--sbb-file-selector-background-color: var(--sbb-color-milk);--sbb-file-selector-border-color: var(--sbb-color-storm)}@media (forced-colors: active){:host(:is(:state(active),[state--active])){--sbb-file-selector-border-color: Highlight}}.sbb-file-selector__input-container{-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column}.sbb-file-selector__visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-file-selector__file-list{display:flex;flex-direction:column;row-gap:var(--sbb-spacing-fixed-3x);margin-block:0;padding-inline:0;padding-block:var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x)}.sbb-file-selector__file{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:flex;gap:var(--sbb-spacing-fixed-4x);align-items:center;justify-content:space-between}.sbb-file-selector__file-details{display:flex;flex:1;justify-content:space-between;gap:var(--sbb-spacing-fixed-4x);overflow:auto}.sbb-file-selector__file-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-file-selector__file-size{white-space:nowrap;color:var(--sbb-color-metal)}:host(:not([data-slot-names~=error])) .sbb-file-selector__error{display:none}`;
3
+ export {
4
+ i as f
5
+ };
package/file-selector.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { SbbFileSelectorCommonElementMixin as r } from "./file-selector/common/file-selector-common.js";
2
- import { f as t } from "./file-selector-common-Dw5d8vA4.js";
2
+ import { f as t } from "./file-selector-common-Cn6U8goV.js";
3
3
  import { SbbFileSelectorDropzoneElement as S } from "./file-selector/file-selector-dropzone/file-selector-dropzone.component.js";
4
4
  import { SbbFileSelectorElement as b } from "./file-selector/file-selector/file-selector.component.js";
5
5
  export {
@@ -1,7 +1,7 @@
1
1
  import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
2
2
  /** An interface which allows a control to work inside of a `SbbFormField`. */
3
3
  export interface SbbFormFieldElementControl {
4
- /** The id of the form field. */
4
+ /** The id of the form field control. */
5
5
  readonly id: string;
6
6
  /** Whether the control is empty. */
7
7
  readonly empty: boolean;
@@ -9,8 +9,11 @@ export interface SbbFormFieldElementControl {
9
9
  readonly readOnly?: boolean;
10
10
  /** Whether the control is disabled. */
11
11
  readonly disabled: boolean;
12
- /** Handles a click on the control's container. */
13
- onContainerClick(event: MouseEvent): void;
12
+ /**
13
+ * Handles a click on the control's container.
14
+ * If not implemented, focus() of the element is called.
15
+ */
16
+ onContainerClick?(event: MouseEvent): void;
14
17
  }
15
18
  export declare class SbbFormFieldControlEvent extends Event {
16
19
  private _control;
@@ -1 +1 @@
1
- {"version":3,"file":"form-field.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/form-field/form-field/form-field.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAoBb,OAAO,eAAe,CAAC;AAOvB,8EAA8E;AAC9E,MAAM,WAAW,0BAA0B;IACzC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,uCAAuC;IACvC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAE3B,kDAAkD;IAClD,gBAAgB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC3C;AAED,qBAAa,wBAAyB,SAAQ,KAAK;IACjD,OAAO,CAAC,QAAQ,CAAoC;IAEpD,IAAW,OAAO,IAAI,0BAA0B,GAAG,IAAI,CAEtD;gBAEkB,OAAO,EAAE,0BAA0B,GAAG,IAAI;CAI9D;;AAED;;;;;;;;GAQG;AACH,qBAGM,mBAAoB,SAAQ,wBAEjC;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAGtD,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAAuD;IAE9F,OAAO,CAAC,QAAQ,CAAC,oCAAoC,CAOnD;IAEF,OAAO,CAAC,QAAQ,CAAC,iCAAiC,CAQhD;IAEF;;;;OAIG;IACH,SACgB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAU;IAExD,+CAA+C;IAC/C,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C;;;OAGG;IACH,SAA6C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAwB;IAE1F,0DAA0D;IAC1D,SAEgB,UAAU,EAAE,OAAO,CAAS;IAE5C;;+EAE2E;IAC3E,SAA6C,KAAK,EAAE,SAAS,GAAG,UAAU,CAAa;IAEvF,wFAAwF;IACxF,SAEgB,WAAW,EAAE,OAAO,CAAS;IAE7C,4FAA4F;IAC5F,SAEgB,aAAa,EAAE,OAAO,CAAS;IAE/C,qDAAqD;IAC5C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;IAEzD,8CAA8C;IACrC,OAAO,CAAC,QAAQ,CAAC,MAAM,CACzB;IAEP,+CAA+C;IACtC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAoB;IAEpD,iCAAiC;IACjC,IAAW,YAAY,IAAI,gBAAgB,GAAG,iBAAiB,GAAG,WAAW,GAAG,IAAI,CAEnF;IAED,OAAO,CAAC,SAAS,CAAmC;IAEpD;;OAEG;IACH,OAAO,CAAC,2BAA2B,CAQ1B;IAET,OAAO,CAAC,yBAAyB,CAAyB;IAC1D,OAAO,CAAC,QAAQ,CAA2C;;IAqD3C,iBAAiB,IAAI,IAAI;cAQtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAW5D,oBAAoB,IAAI,IAAI;IAS5C,OAAO,CAAC,mBAAmB;IAkB3B,OAAO,CAAC,uBAAuB;IAW/B,OAAO,CAAC,kBAAkB;IAW1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,oBAAoB;IAwD5B,OAAO,CAAC,yBAAyB;IA6BjC,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,0BAA0B;IAclC,OAAO,CAAC,gBAAgB;IAgCxB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,yBAAyB;IASjC,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,kBAAkB;IAK1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAqB1B,OAAO,CAAC,2BAA2B;IASnC,qFAAqF;IAC9E,KAAK,IAAI,IAAI;IAIpB,4FAA4F;IACrF,KAAK,IAAI,IAAI;IAQpB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,SAAS;cAME,MAAM,IAAI,cAAc;CAmC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;IAED,UAAU,mBAAmB;QAC3B,gBAAgB,EAAE,wBAAwB,CAAC;KAC5C;CACF"}
1
+ {"version":3,"file":"form-field.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/form-field/form-field/form-field.component.ts"],"names":[],"mappings":"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"}