@knime/kds-components 0.17.1 → 0.17.2

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.
@@ -19,6 +19,7 @@ declare function __VLS_template(): {
19
19
  readonly modelValue?: boolean | undefined;
20
20
  readonly placement?: import('../../../overlays/Popover').KdsPopoverPlacement | undefined;
21
21
  readonly role?: import('../../../overlays/Popover').KdsPopoverRole | undefined;
22
+ readonly popoverType?: import('../../../overlays/Popover').KdsPopoverType | undefined;
22
23
  readonly fullWidth?: boolean | undefined;
23
24
  readonly popoverAriaLabel: string;
24
25
  readonly content?: string | undefined;
@@ -50,6 +51,7 @@ declare function __VLS_template(): {
50
51
  }, string, {
51
52
  role: import('../../../overlays/Popover').KdsPopoverRole;
52
53
  placement: import('../../../overlays/Popover').KdsPopoverPlacement;
54
+ popoverType: import('../../../overlays/Popover').KdsPopoverType;
53
55
  fullWidth: boolean;
54
56
  }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
55
57
  beforeCreate?: (() => void) | (() => void)[];
@@ -74,12 +76,13 @@ declare function __VLS_template(): {
74
76
  } & Readonly<{
75
77
  role: import('../../../overlays/Popover').KdsPopoverRole;
76
78
  placement: import('../../../overlays/Popover').KdsPopoverPlacement;
79
+ popoverType: import('../../../overlays/Popover').KdsPopoverType;
77
80
  fullWidth: boolean;
78
81
  }> & Omit<Readonly<{
79
82
  modelValue?: boolean;
80
83
  } & import('../../../overlays/Popover').KdsPopoverProps> & Readonly<{
81
84
  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
82
- }>, "anchorStyle" | "popoverId" | ("role" | "placement" | "fullWidth")> & import('vue').ShallowUnwrapRef<{
85
+ }>, "anchorStyle" | "popoverId" | ("role" | "placement" | "popoverType" | "fullWidth")> & import('vue').ShallowUnwrapRef<{
83
86
  anchorStyle: Record<string, string>;
84
87
  popoverId: string;
85
88
  }> & {} & import('vue').ComponentCustomProperties & {} & {
@@ -105,6 +108,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
105
108
  readonly modelValue?: boolean | undefined;
106
109
  readonly placement?: import('../../../overlays/Popover').KdsPopoverPlacement | undefined;
107
110
  readonly role?: import('../../../overlays/Popover').KdsPopoverRole | undefined;
111
+ readonly popoverType?: import('../../../overlays/Popover').KdsPopoverType | undefined;
108
112
  readonly fullWidth?: boolean | undefined;
109
113
  readonly popoverAriaLabel: string;
110
114
  readonly content?: string | undefined;
@@ -136,6 +140,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
136
140
  }, string, {
137
141
  role: import('../../../overlays/Popover').KdsPopoverRole;
138
142
  placement: import('../../../overlays/Popover').KdsPopoverPlacement;
143
+ popoverType: import('../../../overlays/Popover').KdsPopoverType;
139
144
  fullWidth: boolean;
140
145
  }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
141
146
  beforeCreate?: (() => void) | (() => void)[];
@@ -160,12 +165,13 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
160
165
  } & Readonly<{
161
166
  role: import('../../../overlays/Popover').KdsPopoverRole;
162
167
  placement: import('../../../overlays/Popover').KdsPopoverPlacement;
168
+ popoverType: import('../../../overlays/Popover').KdsPopoverType;
163
169
  fullWidth: boolean;
164
170
  }> & Omit<Readonly<{
165
171
  modelValue?: boolean;
166
172
  } & import('../../../overlays/Popover').KdsPopoverProps> & Readonly<{
167
173
  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
168
- }>, "anchorStyle" | "popoverId" | ("role" | "placement" | "fullWidth")> & import('vue').ShallowUnwrapRef<{
174
+ }>, "anchorStyle" | "popoverId" | ("role" | "placement" | "popoverType" | "fullWidth")> & import('vue').ShallowUnwrapRef<{
169
175
  anchorStyle: Record<string, string>;
170
176
  popoverId: string;
171
177
  }> & {} & import('vue').ComponentCustomProperties & {} & {
@@ -1 +1 @@
1
- {"version":3,"file":"KdsInfoToggleButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/forms/_helper/InfoPopover/KdsInfoToggleButton.vue"],"names":[],"mappings":"AAuHA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD;;GAEG;AAEH,KAAK,WAAW,GAAG,wBAAwB,CAAC;AAmB5C,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAqGT,OAAO,IAA6B;;yBAZpB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAiEwxhB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;EAhD96hB;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA8BoyhB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;OArB76hB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"KdsInfoToggleButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/forms/_helper/InfoPopover/KdsInfoToggleButton.vue"],"names":[],"mappings":"AAuHA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD;;GAEG;AAEH,KAAK,WAAW,GAAG,wBAAwB,CAAC;AAmB5C,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAqGT,OAAO,IAA6B;;yBAZpB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAiEwxhB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;EAhD96hB;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA8BoyhB,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;OArB76hB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
@@ -19,6 +19,7 @@ declare function __VLS_template(): {
19
19
  readonly modelValue?: boolean | undefined;
20
20
  readonly placement?: import('../../../overlays/Popover/types.ts').KdsPopoverPlacement | undefined;
21
21
  readonly role?: import('../../../overlays/Popover/types.ts').KdsPopoverRole | undefined;
22
+ readonly popoverType?: import('../../../overlays/Popover/types.ts').KdsPopoverType | undefined;
22
23
  readonly fullWidth?: boolean | undefined;
23
24
  readonly popoverAriaLabel: string;
24
25
  readonly content?: string | undefined;
@@ -50,6 +51,7 @@ declare function __VLS_template(): {
50
51
  }, string, {
51
52
  role: import('../../../overlays/Popover/types.ts').KdsPopoverRole;
52
53
  placement: import('../../../overlays/Popover/types.ts').KdsPopoverPlacement;
54
+ popoverType: import('../../../overlays/Popover/types.ts').KdsPopoverType;
53
55
  fullWidth: boolean;
54
56
  }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
55
57
  beforeCreate?: (() => void) | (() => void)[];
@@ -74,12 +76,13 @@ declare function __VLS_template(): {
74
76
  } & Readonly<{
75
77
  role: import('../../../overlays/Popover/types.ts').KdsPopoverRole;
76
78
  placement: import('../../../overlays/Popover/types.ts').KdsPopoverPlacement;
79
+ popoverType: import('../../../overlays/Popover/types.ts').KdsPopoverType;
77
80
  fullWidth: boolean;
78
81
  }> & Omit<Readonly<{
79
82
  modelValue?: boolean;
80
83
  } & import('../../../overlays/Popover/types.ts').KdsPopoverProps> & Readonly<{
81
84
  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
82
- }>, "anchorStyle" | "popoverId" | ("role" | "placement" | "fullWidth")> & import('vue').ShallowUnwrapRef<{
85
+ }>, "anchorStyle" | "popoverId" | ("role" | "placement" | "popoverType" | "fullWidth")> & import('vue').ShallowUnwrapRef<{
83
86
  anchorStyle: Record<string, string>;
84
87
  popoverId: string;
85
88
  }> & {} & import('vue').ComponentCustomProperties & {} & {
@@ -108,6 +111,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
108
111
  readonly modelValue?: boolean | undefined;
109
112
  readonly placement?: import('../../../overlays/Popover/types.ts').KdsPopoverPlacement | undefined;
110
113
  readonly role?: import('../../../overlays/Popover/types.ts').KdsPopoverRole | undefined;
114
+ readonly popoverType?: import('../../../overlays/Popover/types.ts').KdsPopoverType | undefined;
111
115
  readonly fullWidth?: boolean | undefined;
112
116
  readonly popoverAriaLabel: string;
113
117
  readonly content?: string | undefined;
@@ -139,6 +143,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
139
143
  }, string, {
140
144
  role: import('../../../overlays/Popover/types.ts').KdsPopoverRole;
141
145
  placement: import('../../../overlays/Popover/types.ts').KdsPopoverPlacement;
146
+ popoverType: import('../../../overlays/Popover/types.ts').KdsPopoverType;
142
147
  fullWidth: boolean;
143
148
  }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
144
149
  beforeCreate?: (() => void) | (() => void)[];
@@ -163,12 +168,13 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
163
168
  } & Readonly<{
164
169
  role: import('../../../overlays/Popover/types.ts').KdsPopoverRole;
165
170
  placement: import('../../../overlays/Popover/types.ts').KdsPopoverPlacement;
171
+ popoverType: import('../../../overlays/Popover/types.ts').KdsPopoverType;
166
172
  fullWidth: boolean;
167
173
  }> & Omit<Readonly<{
168
174
  modelValue?: boolean;
169
175
  } & import('../../../overlays/Popover/types.ts').KdsPopoverProps> & Readonly<{
170
176
  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
171
- }>, "anchorStyle" | "popoverId" | ("role" | "placement" | "fullWidth")> & import('vue').ShallowUnwrapRef<{
177
+ }>, "anchorStyle" | "popoverId" | ("role" | "placement" | "popoverType" | "fullWidth")> & import('vue').ShallowUnwrapRef<{
172
178
  anchorStyle: Record<string, string>;
173
179
  popoverId: string;
174
180
  }> & {} & import('vue').ComponentCustomProperties & {} & {
@@ -1 +1 @@
1
- {"version":3,"file":"KdsVariableToggleButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/forms/_helper/VariablePopover/KdsVariableToggleButton.vue"],"names":[],"mappings":"AAoLA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAC;AAE/D;;GAEG;AAEH,KAAK,WAAW,GAAG,4BAA4B,CAAC;AA0EhD,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAyGT,OAAO,IAA6B;;yBAZpB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAkE0wb,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;EAjDh6b;AAkBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA8Bsxb,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;OArB/5b,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
1
+ {"version":3,"file":"KdsVariableToggleButton.vue.d.ts","sourceRoot":"","sources":["../../../../src/forms/_helper/VariablePopover/KdsVariableToggleButton.vue"],"names":[],"mappings":"AAoLA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAC;AAE/D;;GAEG;AAEH,KAAK,WAAW,GAAG,4BAA4B,CAAC;AA0EhD,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAyGT,OAAO,IAA6B;;yBAZpB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAkE0wb,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;EAjDh6b;AAkBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCA8Bsxb,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;OArB/5b,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
@@ -306,6 +306,7 @@ declare const _default: import('vue').DefineComponent<({
306
306
  readonly modelValue?: boolean | undefined;
307
307
  readonly placement?: import('../../../overlays/Popover/types.ts').KdsPopoverPlacement | undefined;
308
308
  readonly role?: import('../../../overlays/Popover/types.ts').KdsPopoverRole | undefined;
309
+ readonly popoverType?: import('../../../overlays/Popover/types.ts').KdsPopoverType | undefined;
309
310
  readonly fullWidth?: boolean | undefined;
310
311
  readonly popoverAriaLabel: string;
311
312
  readonly content?: string | undefined;
@@ -337,6 +338,7 @@ declare const _default: import('vue').DefineComponent<({
337
338
  }, string, {
338
339
  role: import('../../../overlays/Popover/types.ts').KdsPopoverRole;
339
340
  placement: import('../../../overlays/Popover/types.ts').KdsPopoverPlacement;
341
+ popoverType: import('../../../overlays/Popover/types.ts').KdsPopoverType;
340
342
  fullWidth: boolean;
341
343
  }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
342
344
  beforeCreate?: (() => void) | (() => void)[];
@@ -361,12 +363,13 @@ declare const _default: import('vue').DefineComponent<({
361
363
  } & Readonly<{
362
364
  role: import('../../../overlays/Popover/types.ts').KdsPopoverRole;
363
365
  placement: import('../../../overlays/Popover/types.ts').KdsPopoverPlacement;
366
+ popoverType: import('../../../overlays/Popover/types.ts').KdsPopoverType;
364
367
  fullWidth: boolean;
365
368
  }> & Omit<Readonly<{
366
369
  modelValue?: boolean;
367
370
  } & import('../../../overlays/Popover/types.ts').KdsPopoverProps> & Readonly<{
368
371
  "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
369
- }>, "anchorStyle" | "popoverId" | ("role" | "placement" | "fullWidth")> & import('vue').ShallowUnwrapRef<{
372
+ }>, "anchorStyle" | "popoverId" | ("role" | "placement" | "popoverType" | "fullWidth")> & import('vue').ShallowUnwrapRef<{
370
373
  anchorStyle: Record<string, string>;
371
374
  popoverId: string;
372
375
  }> & {} & import('vue').ComponentCustomProperties & {} & {
@@ -1 +1 @@
1
- {"version":3,"file":"KdsDateInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/forms/inputs/DateInput/KdsDateInput.vue"],"names":[],"mappings":"AAoTA,OAAO,2BAA2B,CAAC;;iBAsFtB,MAAM;;;;;;;;;;;;;;;;;;;;;iBAAN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;iBAAN,MAAM;;;;;;;;;;;;;;;;;;;;;iBAAN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAqP0lL,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAAtH,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;AAlBnuL,wBAUG"}
1
+ {"version":3,"file":"KdsDateInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/forms/inputs/DateInput/KdsDateInput.vue"],"names":[],"mappings":"AAoTA,OAAO,2BAA2B,CAAC;;iBAsFtB,MAAM;;;;;;;;;;;;;;;;;;;;;iBAAN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;iBAAN,MAAM;;;;;;;;;;;;;;;;;;;;;iBAAN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAqP0lL,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAAtH,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;AAlBnuL,wBAUG"}
@@ -1 +1 @@
1
- {"version":3,"file":"KdsSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/forms/inputs/SearchInput/KdsSearchInput.vue"],"names":[],"mappings":";AA2NA,wBAWG"}
1
+ {"version":3,"file":"KdsSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/forms/inputs/SearchInput/KdsSearchInput.vue"],"names":[],"mappings":";AA8eA,wBAWG"}
@@ -1,3 +1,33 @@
1
+ import { KdsIconName } from '../../../accessories';
2
+ import { KdsIconAccessory } from '../../_helper/List/ListItemAccessory/types';
1
3
  import { KdsInputFieldProps } from '../types';
2
- export type KdsSearchInputProps = KdsInputFieldProps;
4
+ export type KdsSearchResult = {
5
+ id: string;
6
+ /** Optional leading icon shown before a section headline */
7
+ sectionHeadlineIcon?: KdsIconName;
8
+ /**
9
+ * When true, the item is rendered as a non-selectable section headline
10
+ * (styled as a section title row). Section headline items are skipped
11
+ * during keyboard navigation and cannot be clicked.
12
+ */
13
+ sectionHeadline?: boolean;
14
+ /** Optional leading accessory (icon only) shown before the text */
15
+ accessory?: KdsIconAccessory;
16
+ text: string;
17
+ /** Optional subtext shown below the main label (multiline list item layout) */
18
+ subText?: string;
19
+ /** Show a separator below the item if it's not the last in the list */
20
+ separator?: boolean;
21
+ };
22
+ export type KdsSearchInputProps = KdsInputFieldProps & {
23
+ /**
24
+ * Results to show in the ListContainer rendered below the input field.
25
+ * If it's undefined, ListContainer is not loaded.
26
+ * Items with `sectionHeadline: true` are rendered as non-selectable
27
+ * section titles. Items with `separator: true` show a divider below them.
28
+ */
29
+ results?: KdsSearchResult[];
30
+ /** Max height of the results container */
31
+ resultsMaxHeight?: string;
32
+ };
3
33
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/forms/inputs/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/forms/inputs/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4CAA4C,CAAC;AACnF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,4DAA4D;IAC5D,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mEAAmE;IACnE,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG;IACrD;;;;;OAKG;IACH,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC"}
package/dist/index.css CHANGED
@@ -980,7 +980,7 @@ html.kds-legacy {
980
980
  }
981
981
 
982
982
  .kds-popover {
983
- &[data-v-09124386] {
983
+ &[data-v-786e523e] {
984
984
  padding: 0;
985
985
  margin: 0;
986
986
  overflow: visible;
@@ -1001,10 +1001,10 @@ html.kds-legacy {
1001
1001
 
1002
1002
  /* noinspection CssInvalidFunction,CssInvalidAtRule */
1003
1003
  }
1004
- &.full-width[data-v-09124386] {
1004
+ &.full-width[data-v-786e523e] {
1005
1005
  min-inline-size: anchor-size(width);
1006
1006
  }
1007
- &.floating.top-right[data-v-09124386] {
1007
+ &.floating.top-right[data-v-786e523e] {
1008
1008
  inset: auto anchor(right) anchor(top) auto;
1009
1009
  margin: var(--kds-spacing-container-0-25x) 0
1010
1010
  var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
@@ -1012,7 +1012,7 @@ html.kds-legacy {
1012
1012
  --kds-popover-try-top-left, --kds-popover-try-bottom-right,
1013
1013
  --kds-popover-try-bottom-left, --kds-popover-try-top-right;
1014
1014
  }
1015
- &.floating.top-left[data-v-09124386] {
1015
+ &.floating.top-left[data-v-786e523e] {
1016
1016
  inset: auto auto anchor(top) anchor(left);
1017
1017
  margin: var(--kds-spacing-container-0-25x)
1018
1018
  var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
@@ -1020,7 +1020,7 @@ html.kds-legacy {
1020
1020
  --kds-popover-try-top-right, --kds-popover-try-bottom-left,
1021
1021
  --kds-popover-try-bottom-right, --kds-popover-try-top-left;
1022
1022
  }
1023
- &.floating.bottom-right[data-v-09124386] {
1023
+ &.floating.bottom-right[data-v-786e523e] {
1024
1024
  inset: anchor(bottom) anchor(right) auto auto;
1025
1025
  margin: var(--kds-spacing-container-0-25x) 0
1026
1026
  var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x);
@@ -1028,7 +1028,7 @@ html.kds-legacy {
1028
1028
  --kds-popover-try-bottom-left, --kds-popover-try-top-right,
1029
1029
  --kds-popover-try-top-left, --kds-popover-try-bottom-right;
1030
1030
  }
1031
- &.floating.bottom-left[data-v-09124386] {
1031
+ &.floating.bottom-left[data-v-786e523e] {
1032
1032
  inset: anchor(bottom) auto auto anchor(left);
1033
1033
  margin: var(--kds-spacing-container-0-25x)
1034
1034
  var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x) 0;
@@ -1065,7 +1065,7 @@ html.kds-legacy {
1065
1065
  margin: var(--kds-spacing-container-0-25x) var(--kds-spacing-container-0-25x)
1066
1066
  var(--kds-spacing-container-0-25x) 0;
1067
1067
  }
1068
- .kds-popover-default-content[data-v-09124386] {
1068
+ .kds-popover-default-content[data-v-786e523e] {
1069
1069
  padding: var(--kds-spacing-container-0-75x);
1070
1070
  font: var(--kds-font-base-body-small);
1071
1071
  color: var(--kds-color-text-and-icon-neutral);
@@ -3111,6 +3111,12 @@ html.kds-legacy {
3111
3111
  height: var(--kds-dimension-component-height-12x);
3112
3112
  }
3113
3113
 
3114
+ .kds-search-results-container[data-v-873d26bd] {
3115
+ background-color: var(--kds-color-surface-default);
3116
+ border-radius: var(--kds-border-radius-container-0-50x);
3117
+ box-shadow: var(--kds-elevation-level-3);
3118
+ }
3119
+
3114
3120
  textarea {
3115
3121
  &[data-v-7a6592b5] {
3116
3122
  box-sizing: border-box;
package/dist/index.js CHANGED
@@ -1689,7 +1689,12 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
1689
1689
 
1690
1690
  const KdsListContainer = /* @__PURE__ */ _export_sfc$1(_sfc_main$C, [["__scopeId", "data-v-e3d86a4e"]]);
1691
1691
 
1692
- const _hoisted_1$p = ["id", "role", "aria-label"];
1692
+ const KdsListContainer$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
1693
+ __proto__: null,
1694
+ default: KdsListContainer
1695
+ }, Symbol.toStringTag, { value: 'Module' }));
1696
+
1697
+ const _hoisted_1$p = ["id", "popover", "role", "aria-label"];
1693
1698
  const _hoisted_2$f = {
1694
1699
  key: 0,
1695
1700
  class: "kds-popover-default-content"
@@ -1699,6 +1704,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
1699
1704
  props: /* @__PURE__ */ mergeModels({
1700
1705
  placement: { default: "bottom-left" },
1701
1706
  role: { default: void 0 },
1707
+ popoverType: { default: "auto" },
1702
1708
  fullWidth: { type: Boolean, default: false },
1703
1709
  popoverAriaLabel: {},
1704
1710
  content: {}
@@ -1721,6 +1727,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
1721
1727
  }
1722
1728
  });
1723
1729
  const anchorStyle = { "anchor-name": anchorName };
1730
+ const onToggle = (event) => {
1731
+ open.value = event.newState === "open";
1732
+ };
1724
1733
  __expose({ anchorStyle, popoverId });
1725
1734
  return (_ctx, _cache) => {
1726
1735
  return openBlock(), createElementBlock("div", {
@@ -1728,11 +1737,11 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
1728
1737
  ref_key: "popoverEl",
1729
1738
  ref: popoverEl,
1730
1739
  class: normalizeClass(["kds-popover", ["floating", props.placement, { "full-width": props.fullWidth }]]),
1731
- popover: "auto",
1740
+ popover: props.popoverType,
1732
1741
  style: normalizeStyle({ "position-anchor": anchorName }),
1733
1742
  role: props.role,
1734
1743
  "aria-label": props.popoverAriaLabel,
1735
- onToggle: _cache[0] || (_cache[0] = ($event) => open.value = $event.newState === "open")
1744
+ onToggle
1736
1745
  }, [
1737
1746
  renderSlot(_ctx.$slots, "default", {}, () => [
1738
1747
  props.content?.trim().length ? (openBlock(), createElementBlock("div", _hoisted_2$f, toDisplayString(props.content), 1)) : createCommentVNode("", true)
@@ -1742,7 +1751,12 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
1742
1751
  }
1743
1752
  });
1744
1753
 
1745
- const KdsPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$B, [["__scopeId", "data-v-09124386"]]);
1754
+ const KdsPopover = /* @__PURE__ */ _export_sfc$1(_sfc_main$B, [["__scopeId", "data-v-786e523e"]]);
1755
+
1756
+ const KdsPopover$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
1757
+ __proto__: null,
1758
+ default: KdsPopover
1759
+ }, Symbol.toStringTag, { value: 'Module' }));
1746
1760
 
1747
1761
  const _sfc_main$A = /* @__PURE__ */ defineComponent({
1748
1762
  ...{
@@ -14517,22 +14531,82 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
14517
14531
  preserveSubTextSpace: { type: Boolean, default: false },
14518
14532
  placeholder: { default: "Search" },
14519
14533
  disabled: { type: Boolean, default: false },
14520
- autocomplete: {}
14534
+ autocomplete: {},
14535
+ results: {},
14536
+ resultsMaxHeight: {}
14521
14537
  }, {
14522
14538
  "modelValue": { default: "" },
14523
14539
  "modelModifiers": {}
14524
14540
  }),
14525
- emits: /* @__PURE__ */ mergeModels(["focus", "blur", "keydown"], ["update:modelValue"]),
14541
+ emits: /* @__PURE__ */ mergeModels(["focus", "blur", "keydown", "resultClick"], ["update:modelValue"]),
14526
14542
  setup(__props, { expose: __expose, emit: __emit }) {
14543
+ const KdsPopover = defineAsyncComponent(
14544
+ () => Promise.resolve().then(() => KdsPopover$1)
14545
+ );
14546
+ const KdsListContainer = defineAsyncComponent(
14547
+ () => Promise.resolve().then(() => KdsListContainer$1)
14548
+ );
14527
14549
  const props = __props;
14528
14550
  const modelValue = useModel(__props, "modelValue");
14529
14551
  const emit = __emit;
14530
14552
  const baseInput = useTemplateRef("baseInput");
14553
+ const popoverEl = useTemplateRef("popover");
14554
+ const listContainerEl = useTemplateRef("listContainer");
14555
+ const resultsOpen = ref(false);
14556
+ const onKeyDown = (event) => {
14557
+ if (resultsOpen.value) {
14558
+ listContainerEl.value?.handleKeydown(event);
14559
+ }
14560
+ emit("keydown", event);
14561
+ };
14562
+ const onFocus = (event) => {
14563
+ if (props.results) {
14564
+ resultsOpen.value = true;
14565
+ listContainerEl.value?.handleFocus();
14566
+ }
14567
+ emit("focus", event);
14568
+ };
14569
+ const onBlur = (event) => {
14570
+ if (resultsOpen.value) {
14571
+ resultsOpen.value = false;
14572
+ listContainerEl.value?.handleBlur();
14573
+ }
14574
+ emit("blur", event);
14575
+ };
14576
+ const onClick = () => {
14577
+ if (props.results && !resultsOpen.value) {
14578
+ resultsOpen.value = true;
14579
+ listContainerEl.value?.handleFocus();
14580
+ }
14581
+ };
14582
+ const maxHeightStyle = computed(() => {
14583
+ if (!props.resultsMaxHeight) {
14584
+ return {};
14585
+ }
14586
+ return {
14587
+ maxHeight: props.resultsMaxHeight,
14588
+ overflowY: "auto"
14589
+ };
14590
+ });
14591
+ const onResultClick = (itemId) => {
14592
+ resultsOpen.value = false;
14593
+ listContainerEl.value?.handleBlur();
14594
+ emit("resultClick", itemId);
14595
+ };
14531
14596
  __expose({
14532
14597
  focus: () => baseInput.value?.focus()
14533
14598
  });
14534
14599
  return (_ctx, _cache) => {
14535
- return openBlock(), createBlock(BaseFormFieldWrapper, normalizeProps(guardReactiveProps(props)), {
14600
+ return openBlock(), createBlock(BaseFormFieldWrapper, {
14601
+ id: __props.id,
14602
+ label: __props.label,
14603
+ "aria-label": __props.ariaLabel,
14604
+ description: __props.description,
14605
+ "sub-text": __props.subText,
14606
+ error: __props.error,
14607
+ validating: __props.validating,
14608
+ "preserve-sub-text-space": __props.preserveSubTextSpace
14609
+ }, {
14536
14610
  default: withCtx((slotProps) => [
14537
14611
  createVNode(BaseInput, mergeProps({
14538
14612
  ref_key: "baseInput",
@@ -14541,23 +14615,55 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
14541
14615
  modelValue: modelValue.value,
14542
14616
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
14543
14617
  type: "search",
14544
- placeholder: props.placeholder,
14545
- disabled: props.disabled,
14546
- error: props.error,
14547
- autocomplete: props.autocomplete,
14618
+ placeholder: __props.placeholder,
14619
+ disabled: __props.disabled,
14620
+ error: __props.error,
14621
+ autocomplete: __props.autocomplete,
14548
14622
  "leading-icon": "search",
14549
14623
  clearable: true,
14550
- onFocus: _cache[1] || (_cache[1] = ($event) => emit("focus", $event)),
14551
- onBlur: _cache[2] || (_cache[2] = ($event) => emit("blur", $event)),
14552
- onKeydown: _cache[3] || (_cache[3] = ($event) => emit("keydown", $event))
14553
- }), null, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete"])
14624
+ style: popoverEl.value?.anchorStyle,
14625
+ "aria-activedescendant": resultsOpen.value ? listContainerEl.value?.activeDescendant : void 0,
14626
+ onKeydown: onKeyDown,
14627
+ onFocus,
14628
+ onBlur,
14629
+ onClick
14630
+ }), null, 16, ["modelValue", "placeholder", "disabled", "error", "autocomplete", "style", "aria-activedescendant"]),
14631
+ __props.results ? (openBlock(), createBlock(unref(KdsPopover), {
14632
+ key: 0,
14633
+ ref: "popover",
14634
+ modelValue: resultsOpen.value,
14635
+ "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => resultsOpen.value = $event),
14636
+ "full-width": "",
14637
+ "popover-type": "manual",
14638
+ "popover-aria-label": "Search results container"
14639
+ }, {
14640
+ default: withCtx(() => [
14641
+ createElementVNode("div", {
14642
+ class: "kds-search-results-container",
14643
+ style: normalizeStyle(maxHeightStyle.value)
14644
+ }, [
14645
+ createVNode(unref(KdsListContainer), {
14646
+ ref: "listContainer",
14647
+ variant: "large",
14648
+ "possible-values": __props.results,
14649
+ "controlled-externally": "",
14650
+ "empty-text": "No search results",
14651
+ "aria-label": "Search results list",
14652
+ onItemClick: onResultClick
14653
+ }, null, 8, ["possible-values"])
14654
+ ], 4)
14655
+ ]),
14656
+ _: 1
14657
+ }, 8, ["modelValue"])) : createCommentVNode("", true)
14554
14658
  ]),
14555
14659
  _: 1
14556
- }, 16);
14660
+ }, 8, ["id", "label", "aria-label", "description", "sub-text", "error", "validating", "preserve-sub-text-space"]);
14557
14661
  };
14558
14662
  }
14559
14663
  });
14560
14664
 
14665
+ const KdsSearchInput = /* @__PURE__ */ _export_sfc$1(_sfc_main$f, [["__scopeId", "data-v-873d26bd"]]);
14666
+
14561
14667
  const _hoisted_1$c = ["rows", "placeholder", "disabled", "autocomplete"];
14562
14668
  const _sfc_main$e = /* @__PURE__ */ defineComponent({
14563
14669
  __name: "KdsTextarea",
@@ -15959,5 +16065,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
15959
16065
 
15960
16066
  const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__scopeId", "data-v-41fc8d84"]]);
15961
16067
 
15962
- export { KdsAvatar, KdsBadge, _sfc_main$L as KdsButton, KdsCardClickable, _sfc_main$w as KdsCheckbox, KdsCheckboxGroup, _sfc_main$m as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$k as KdsDateInput, _sfc_main$i as KdsDateTimeFormatInput, _sfc_main$b as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, _sfc_main$K as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$8 as KdsMultiSelectDropdown, _sfc_main$h as KdsNumberInput, _sfc_main$g as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, _sfc_main$f as KdsSearchInput, KdsSubText, _sfc_main$o as KdsTextInput, KdsTextarea, _sfc_main$J as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsTemporalType, kdsTemporalTypes, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
16068
+ export { KdsAvatar, KdsBadge, _sfc_main$L as KdsButton, KdsCardClickable, _sfc_main$w as KdsCheckbox, KdsCheckboxGroup, _sfc_main$m as KdsColorInput, KdsColorSwatch, KdsDataType, _sfc_main$k as KdsDateInput, _sfc_main$i as KdsDateTimeFormatInput, _sfc_main$b as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, KdsLabel, _sfc_main$K as KdsLinkButton, KdsLiveStatus, KdsLoadingSpinner, KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$8 as KdsMultiSelectDropdown, _sfc_main$h as KdsNumberInput, _sfc_main$g as KdsPatternInput, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsSearchInput, KdsSubText, _sfc_main$o as KdsTextInput, KdsTextarea, _sfc_main$J as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsTemporalType, kdsTemporalTypes, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
15963
16069
  //# sourceMappingURL=index.js.map