@coveo/quantic 3.28.0-pre.6a5d453b00 → 3.28.0-pre.76e8d6f173

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.
@@ -1,20 +1,30 @@
1
1
  lightning-icon {
2
2
  --slds-c-icon-color-foreground-default: var(--slds-g-color-brand-base-100, white);
3
3
  }
4
- .case-classification-visual-picker__figure {
4
+ .slds-visual-picker__figure {
5
5
  width: 9.6rem;
6
6
  height: 2rem;
7
7
  }
8
8
 
9
+ .slds-form-element {
10
+ display: flex;
11
+ flex-direction: column;
12
+ }
13
+
9
14
  .loading-holder {
10
15
  width: 9.6rem;
11
16
  height: 2rem;
12
17
  }
13
18
 
14
- .text-color-inherit {
19
+ .slds-form-element__label {
15
20
  color: unset;
16
21
  }
17
22
 
23
+ .row {
24
+ display: flex;
25
+ flex-wrap: wrap;
26
+ }
27
+
18
28
  .visual-picker__hidden {
19
29
  animation: hideAnimation 0.3s ease-in-out forwards;
20
30
  }
@@ -27,8 +37,14 @@ lightning-icon {
27
37
  }
28
38
  }
29
39
 
30
- .slds-visual-picker input:checked ~ label .visual-picker__figure:after {
40
+ .slds-visual-picker input:checked ~ label .slds-visual-picker__text:after {
31
41
  border-right-color: var(--lwc-colorBorderRowSelectedHover, rgb(27, 150, 255));
32
42
  border-top-color: var(--lwc-colorBorderRowSelectedHover, rgb(27, 150, 255));
33
43
  border-radius: 4px;
34
- }
44
+ }
45
+
46
+ .content-center {
47
+ display: flex;
48
+ justify-content: center;
49
+ align-items: center;
50
+ }
@@ -1,58 +1,31 @@
1
1
  <template>
2
2
  <template lwc:if={hasInitializationError}>
3
- <c-quantic-component-error
4
- component-name={template.host.localName}
5
- message={initializationErrorMessage}
6
- >
3
+ <c-quantic-component-error component-name={template.host.localName} message={initializationErrorMessage}>
7
4
  </c-quantic-component-error>
8
5
  </template>
9
6
  <template lwc:else>
10
7
  <fieldset class={formClass}>
11
- <legend
12
- data-testid="case-classification-label"
13
- class="slds-form-element__legend slds-form-element__label slds-text-heading_small text-color-inherit"
14
- >
8
+ <legend data-testid="case-classification-label" class="slds-form-element__legend slds-form-element__label slds-text-heading_small">
15
9
  {label}
16
10
  </legend>
17
11
  <template if:true={loading}>
18
12
  <div class="loading-holder slds-is-relative slds-var-m-top_x-small">
19
- <lightning-spinner
20
- alternative-text={labels.loading}
21
- size="small"
22
- ></lightning-spinner>
13
+ <lightning-spinner alternative-text={labels.loading} size="small"></lightning-spinner>
23
14
  </div>
24
15
  </template>
25
16
  <template if:false={loading}>
26
- <div
27
- class="slds-form-element__control"
28
- aria-describedby="case-classification-error-message"
29
- >
30
- <div class="slds-grid slds-wrap">
17
+ <div class="slds-form-element__control" aria-describedby="case-classification-error-message">
18
+ <div class="row">
31
19
  <template if:false={hideSuggestions}>
32
20
  <template for:each={suggestions} for:item="suggestion">
33
- <div
34
- key={suggestion.value}
35
- data-testid="case-classification-suggestion"
36
- class="case-classification-suggestion slds-visual-picker slds-scrollable_none slds-visual-picker_medium slds-m-left_none slds-var-m-right_medium slds-var-m-top_x-small"
37
- >
38
- <input
39
- type="checkbox"
40
- checked={suggestion.checked}
41
- data-suggestion-id={suggestion.id}
42
- onchange={handleSelectSuggestion}
43
- id={suggestion.value}
44
- value={suggestion.value}
45
- name="options"
46
- />
21
+ <div key={suggestion.value} data-testid="case-classification-suggestion" class="case-classification-suggestion slds-visual-picker slds-scrollable_none slds-visual-picker_medium slds-m-left_none slds-var-m-right_medium slds-var-m-top_x-small">
22
+ <input type="checkbox" checked={suggestion.checked} data-suggestion-id={suggestion.id}
23
+ onchange={handleSelectSuggestion} id={suggestion.value} value={suggestion.value} name="options" />
47
24
  <label for={suggestion.value} title={suggestion.value}>
48
- <span
49
- class="slds-visual-picker__figure case-classification-visual-picker__figure slds-visual-picker__text slds-var-p-horizontal_medium slds-grid slds-grid_align-center slds-grid_vertical-align-center"
50
- >
25
+ <span class="slds-visual-picker__figure slds-visual-picker__text slds-var-p-horizontal_medium content-center">
51
26
  <span class="slds-truncate">{suggestion.value}</span>
52
27
  </span>
53
- <span
54
- class="slds-icon_container slds-visual-picker__text-check"
55
- >
28
+ <span class="slds-icon_container slds-visual-picker__text-check">
56
29
  <lightning-icon size="xx-small" icon-name="utility:check">
57
30
  </lightning-icon>
58
31
  </span>
@@ -62,52 +35,25 @@
62
35
  </template>
63
36
  <template if:true={isMoreOptionsVisible}>
64
37
  <template if:false={isSelectVisible}>
65
- <lightning-button
66
- data-testid="show-select-input-button"
67
- class="slds-var-m-top_x-small"
68
- variant="base"
69
- label={selectPlaceholder}
70
- title={selectPlaceholder}
71
- onclick={showSelect}
72
- >
38
+ <lightning-button data-testid="show-select-input-button" class="slds-var-m-top_x-small" variant="base" label={selectPlaceholder}
39
+ title={selectPlaceholder} onclick={showSelect}>
73
40
  </lightning-button>
74
41
  </template>
75
42
  <template if:true={isSelectVisible}>
76
- <lightning-combobox
77
- data-testid="case-classification-all-options-combobox"
78
- class="slds-var-m-top_x-small"
79
- value={value}
80
- variant="label-hidden"
81
- placeholder={selectPlaceholder}
82
- options={options}
83
- onchange={handleSelectChange}
84
- ></lightning-combobox>
43
+ <lightning-combobox data-testid="case-classification-all-options-combobox" class="slds-var-m-top_x-small" value={value} variant="label-hidden"
44
+ placeholder={selectPlaceholder} options={options} onchange={handleSelectChange}></lightning-combobox>
85
45
  </template>
86
46
  </template>
87
47
  <template if:false={isMoreOptionsVisible}>
88
48
  <template for:each={filteredOptions} for:item="option">
89
- <div
90
- key={option.value}
91
- data-testid="case-classification-option"
92
- class="case-classification-option slds-visual-picker slds-scrollable_none slds-visual-picker_medium slds-m-left_none slds-var-m-right_medium slds-var-m-top_x-small"
93
- >
94
- <input
95
- type="checkbox"
96
- checked={option.checked}
97
- onchange={handleSelectSuggestion}
98
- id={option.value}
99
- value={option.value}
100
- name="options"
101
- />
49
+ <div key={option.value} data-testid="case-classification-option" class="case-classification-option slds-visual-picker slds-scrollable_none slds-visual-picker_medium slds-m-left_none slds-var-m-right_medium slds-var-m-top_x-small">
50
+ <input type="checkbox" checked={option.checked} onchange={handleSelectSuggestion} id={option.value}
51
+ value={option.value} name="options" />
102
52
  <label for={option.value} title={option.value}>
103
- <span
104
- class="slds-visual-picker__figure case-classification-visual-picker__figure slds-visual-picker__text slds-var-p-horizontal_medium slds-grid slds-grid_align-center slds-grid_vertical-align-center"
105
- >
53
+ <span class="slds-visual-picker__figure slds-visual-picker__text slds-var-p-horizontal_medium content-center">
106
54
  <span class="slds-truncate">{option.value}</span>
107
55
  </span>
108
- <span
109
- class="slds-icon_container slds-visual-picker__text-check"
110
- >
56
+ <span class="slds-icon_container slds-visual-picker__text-check">
111
57
  <lightning-icon size="xx-small" icon-name="utility:check">
112
58
  </lightning-icon>
113
59
  </span>
@@ -118,15 +64,11 @@
118
64
  </div>
119
65
  </div>
120
66
  <template if:true={hasError}>
121
- <div
122
- data-testid="case-classification-error-message"
123
- class="slds-form-element__help"
124
- id="case-classification-error-message"
125
- >
67
+ <div data-testid="case-classification-error-message" class="slds-form-element__help" id="case-classification-error-message">
126
68
  {errorMessage}
127
69
  </div>
128
70
  </template>
129
71
  </template>
130
72
  </fieldset>
131
73
  </template>
132
- </template>
74
+ </template>
@@ -319,7 +319,7 @@ export default class QuanticCaseClassification extends LightningElement {
319
319
  * @returns {string}
320
320
  */
321
321
  get formClass() {
322
- return `slds-form-element slds-grid slds-grid_vertical ${this.hasError ? 'slds-has-error' : ''}`;
322
+ return `slds-form-element ${this.hasError ? 'slds-has-error' : ''}`;
323
323
  }
324
324
 
325
325
  /**
@@ -6,7 +6,13 @@
6
6
  height: 3.5rem;
7
7
  }
8
8
 
9
- .card-border {
9
+ .row {
10
+ display: flex;
11
+ align-items: center;
12
+ justify-content: space-between;
13
+ }
14
+
15
+ .slds-card {
10
16
  border: 1px solid #dddbda;
11
17
  }
12
18
 
@@ -11,7 +11,7 @@
11
11
  </template>
12
12
  <template if:false={loading}>
13
13
  <template if:true={hasSuggestions}>
14
- <div class="slds-card card-border">
14
+ <div class="slds-card">
15
15
  <lightning-accordion active-section-name={openedDocuments} allow-multiple-sections-open
16
16
  class="slds-p-vertical_xx-small">
17
17
  <template iterator:it={suggestions}>
@@ -26,7 +26,7 @@
26
26
  slds-var-p-vertical_x-small
27
27
  ">
28
28
  <p class="excerpt">{it.value.excerpt}</p>
29
- <div class="slds-grid slds-grid_align-spread slds-grid_vertical-align-center slds-var-p-top_medium">
29
+ <div class="row slds-var-p-top_medium">
30
30
  <template lwc:if={quickviewIsVisible}>
31
31
  <c-quantic-result-quickview engine-id={engineId}
32
32
  preview-button-icon="utility:new_window" preview-button-label={labels.readMore}
@@ -14,17 +14,10 @@
14
14
  class="slds-m-left_x-small"
15
15
  onclick={previous}
16
16
  aria-label={labels.previousPage}
17
- data-testid="previous-button"
18
17
  ></lightning-button>
19
18
 
20
19
  <template for:each={currentPagesObjects} for:item="page">
21
- <c-quantic-number-button
22
- key={page.number}
23
- number={page.number}
24
- selected={page.selected}
25
- onquantic__select={goto}
26
- aria-label-value={page.ariaLabelValue}
27
- ></c-quantic-number-button>
20
+ <c-quantic-number-button key={page.number} number={page.number} selected={page.selected} onquantic__select={goto} aria-label-value={page.ariaLabelValue}></c-quantic-number-button>
28
21
  </template>
29
22
 
30
23
  <lightning-button
@@ -35,7 +28,6 @@
35
28
  class="slds-m-left_x-small"
36
29
  onclick={next}
37
30
  aria-label={labels.nextPage}
38
- data-testid="next-button"
39
31
  ></lightning-button>
40
32
  </lightning-button-group>
41
33
  </template>
@@ -25,7 +25,7 @@
25
25
  box-shadow: 0 0 0 0.25rem #f6f7f9;
26
26
  }
27
27
 
28
- .quickview-modal__footer {
28
+ .slds-modal__footer{
29
29
  background-color: white;
30
30
  text-align: unset;
31
31
  }
@@ -47,7 +47,7 @@
47
47
  result={result} content-url={contentURL}
48
48
  onquantic__loadingstatechange={handleLoadingStateChange}></c-quantic-quickview-content>
49
49
  <template if:false={isLoading}>
50
- <footer onclick={stopPropagation} class="slds-modal__footer quickview-modal__footer slds-p-top_none slds-p-bottom_none">
50
+ <footer onclick={stopPropagation} class="slds-modal__footer slds-p-top_none slds-p-bottom_none">
51
51
  <slot name="footer"></slot>
52
52
  </footer>
53
53
  </template>
@@ -1,7 +1,11 @@
1
+ .tab-bar_list-container {
2
+ display: flex;
3
+ }
4
+
1
5
  .tab-bar_dropdown {
2
6
  max-width: 150px;
3
7
  }
4
8
 
5
- .tab-bar__more-button:focus {
9
+ .slds-tabs_default__overflow-button .slds-button:focus {
6
10
  text-decoration: none;
7
11
  }
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div class={tabBarContainerClasses}>
3
3
  <div
4
- class="tab-bar_list-container slds-grid slds-tabs_default slds-tabs_default__nav slds-is-relative"
4
+ class="tab-bar_list-container slds-tabs_default slds-tabs_default__nav slds-is-relative"
5
5
  >
6
6
  <slot></slot>
7
7
  <div
@@ -13,7 +13,7 @@
13
13
  <div class={dropdownClasses} data-testid="tab-bar_dropdown-container">
14
14
  <button
15
15
  data-testid="tab-bar_more-button"
16
- class="slds-button slds-var-p-horizontal_small tab-bar__more-button"
16
+ class="slds-button slds-var-p-horizontal_small"
17
17
  aria-haspopup="true"
18
18
  onclick={toggleDropdown}
19
19
  name={labels.more}
@@ -8,7 +8,6 @@
8
8
  left: 50%;
9
9
  transition: transform 0s linear 0s, opacity 0.1s linear 0s, visibility 0.1s linear 0s;
10
10
  z-index: 40;
11
- width: max-content;
12
11
  }
13
12
 
14
13
  .tooltip__content--positioned-above {
@@ -25,6 +24,11 @@
25
24
  opacity: 1;
26
25
  }
27
26
 
27
+ .tooltip__content--light,
28
+ .slds-popover_tooltip {
29
+ width: max-content;
30
+ }
31
+
28
32
  .tooltip__arrow {
29
33
  left: 50%;
30
34
  transform: translate(-50%, -100%);
@@ -61,14 +65,18 @@
61
65
  width: fit-content;
62
66
  }
63
67
 
64
- .tooltip__nubbin--bottom:before,
65
- .tooltip__nubbin--bottom:after {
68
+ .slds-nubbin_bottom:after,
69
+ .slds-nubbin--bottom:after,
70
+ .slds-nubbin_bottom:before,
71
+ .slds-nubbin--bottom:before {
66
72
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
67
73
  border: solid 0.5px rgba(0, 0, 0, 0.16);
68
74
  }
69
75
 
70
- .tooltip__nubbin--top:before,
71
- .tooltip__nubbin--top:after {
76
+ .slds-nubbin_top:after,
77
+ .slds-nubbin--top:after,
78
+ .slds-nubbin_top:before,
79
+ .slds-nubbin--top:before {
72
80
  clip-path: polygon(100% 0, 0 0, 0 100%);
73
81
  border: solid 0.5px rgba(0, 0, 0, 0.16);
74
- }
82
+ }
@@ -139,8 +139,8 @@ export default class QuanticTooltip extends LightningElement {
139
139
  get tooltipArrowCSSClass() {
140
140
  return `tooltip__arrow slds-fall-into-ground slds-is-absolute ${
141
141
  this.displayTooltipAboveTarget
142
- ? 'tooltip__arrow--positioned-above slds-nubbin_bottom tooltip__nubbin--bottom'
143
- : 'tooltip__arrow--positioned-below slds-nubbin_top tooltip__nubbin--top'
142
+ ? 'tooltip__arrow--positioned-above slds-nubbin_bottom'
143
+ : 'tooltip__arrow--positioned-below slds-nubbin_top'
144
144
  } ${this.lightTheme ? 'tooltip__arrow--light' : 'tooltip__arrow--dark'} ${
145
145
  this.isVisible ? 'tooltip__content--visible' : ''
146
146
  }`;