@politiet/sheriff-web-components 2.6.1 → 2.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +620 -292
- package/dist/frameworks/preact.d.ts +7 -1
- package/dist/frameworks/preact.d.ts.map +1 -1
- package/dist/frameworks/react.d.ts +22 -11
- package/dist/frameworks/react.d.ts.map +1 -1
- package/dist/frameworks/solidjs.d.ts +2 -0
- package/dist/frameworks/solidjs.d.ts.map +1 -1
- package/dist/frameworks/svelte.d.ts +2 -0
- package/dist/frameworks/svelte.d.ts.map +1 -1
- package/dist/frameworks/vue.d.ts +2 -0
- package/dist/frameworks/vue.d.ts.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/mixins/sds-dialog-target-mixin.d.ts +2 -0
- package/dist/mixins/sds-dialog-target-mixin.d.ts.map +1 -1
- package/dist/mixins/sds-dialog-target-mixin.js +31 -15
- package/dist/mixins/sds-dialog-target-mixin.js.map +1 -1
- package/dist/mixins/sds-form-control-mixin.d.ts +5 -0
- package/dist/mixins/sds-form-control-mixin.d.ts.map +1 -1
- package/dist/mixins/sds-form-control-mixin.js +1 -1
- package/dist/mixins/sds-form-control-mixin.js.map +1 -1
- package/dist/react-wrappers/SDSDetailsGroupWrapper.d.ts +3 -0
- package/dist/react-wrappers/SDSDetailsGroupWrapper.d.ts.map +1 -0
- package/dist/react-wrappers/SDSDetailsGroupWrapper.js +9 -0
- package/dist/react-wrappers/SDSDetailsGroupWrapper.js.map +1 -0
- package/dist/react-wrappers/SDSDetailsWrapper.d.ts.map +1 -1
- package/dist/react-wrappers/SDSDetailsWrapper.js +1 -1
- package/dist/react-wrappers/SDSDetailsWrapper.js.map +1 -1
- package/dist/react-wrappers/SDSPopoverWrapper.d.ts +4 -1
- package/dist/react-wrappers/SDSPopoverWrapper.d.ts.map +1 -1
- package/dist/react-wrappers/SDSPopoverWrapper.js +3 -1
- package/dist/react-wrappers/SDSPopoverWrapper.js.map +1 -1
- package/dist/react-wrappers/SDSTooltipWrapper.d.ts +6 -0
- package/dist/react-wrappers/SDSTooltipWrapper.d.ts.map +1 -0
- package/dist/react-wrappers/SDSTooltipWrapper.js +12 -0
- package/dist/react-wrappers/SDSTooltipWrapper.js.map +1 -0
- package/dist/react-wrappers/index.d.ts +2 -0
- package/dist/react-wrappers/index.d.ts.map +1 -1
- package/dist/react-wrappers/index.js +2 -0
- package/dist/react-wrappers/index.js.map +1 -1
- package/dist/sds-alert/sds-alert.component.js +1 -1
- package/dist/sds-alert/sds-alert.component.js.map +1 -1
- package/dist/sds-button/sds-button.component.d.ts +1 -0
- package/dist/sds-button/sds-button.component.d.ts.map +1 -1
- package/dist/sds-button/sds-button.component.js +6 -1
- package/dist/sds-button/sds-button.component.js.map +1 -1
- package/dist/sds-button/sds-button.spec.js +1 -1
- package/dist/sds-button/sds-button.spec.js.map +1 -1
- package/dist/sds-card/sds-card.js +1 -1
- package/dist/sds-card/sds-card.js.map +1 -1
- package/dist/sds-card/sds-card.styles.d.ts.map +1 -1
- package/dist/sds-card/sds-card.styles.js +24 -21
- package/dist/sds-card/sds-card.styles.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.d.ts +2 -2
- package/dist/sds-checkbox/sds-checkbox.d.ts.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.js +6 -3
- package/dist/sds-checkbox/sds-checkbox.js.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.d.ts.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.js +5 -3
- package/dist/sds-checkbox-group/sds-checkbox-group.js.map +1 -1
- package/dist/sds-chip/sds-chip.d.ts +7 -5
- package/dist/sds-chip/sds-chip.d.ts.map +1 -1
- package/dist/sds-chip/sds-chip.js +29 -16
- package/dist/sds-chip/sds-chip.js.map +1 -1
- package/dist/sds-details/sds-details.d.ts +3 -2
- package/dist/sds-details/sds-details.d.ts.map +1 -1
- package/dist/sds-details/sds-details.js +11 -2
- package/dist/sds-details/sds-details.js.map +1 -1
- package/dist/sds-details/sds-details.styles.d.ts.map +1 -1
- package/dist/sds-details/sds-details.styles.js +10 -5
- package/dist/sds-details/sds-details.styles.js.map +1 -1
- package/dist/sds-details-group/sds-details-group.d.ts +24 -0
- package/dist/sds-details-group/sds-details-group.d.ts.map +1 -0
- package/dist/sds-details-group/sds-details-group.js +73 -0
- package/dist/sds-details-group/sds-details-group.js.map +1 -0
- package/dist/sds-details-group/sds-details-group.styles.d.ts +2 -0
- package/dist/sds-details-group/sds-details-group.styles.d.ts.map +1 -0
- package/dist/sds-details-group/sds-details-group.styles.js +30 -0
- package/dist/sds-details-group/sds-details-group.styles.js.map +1 -0
- package/dist/sds-dialog/sds-dialog.component.js +1 -1
- package/dist/sds-dialog/sds-dialog.component.js.map +1 -1
- package/dist/sds-dialog/sds-dialog.spec.js +17 -3
- package/dist/sds-dialog/sds-dialog.spec.js.map +1 -1
- package/dist/sds-heading/sds-heading.styles.d.ts.map +1 -1
- package/dist/sds-heading/sds-heading.styles.js +8 -2
- package/dist/sds-heading/sds-heading.styles.js.map +1 -1
- package/dist/sds-popover/sds-popover.d.ts +3 -1
- package/dist/sds-popover/sds-popover.d.ts.map +1 -1
- package/dist/sds-popover/sds-popover.js +18 -4
- package/dist/sds-popover/sds-popover.js.map +1 -1
- package/dist/sds-process-step/sds-process-step.styles.d.ts.map +1 -1
- package/dist/sds-process-step/sds-process-step.styles.js +6 -2
- package/dist/sds-process-step/sds-process-step.styles.js.map +1 -1
- package/dist/sds-radio/sds-radio.d.ts +2 -2
- package/dist/sds-radio/sds-radio.d.ts.map +1 -1
- package/dist/sds-radio/sds-radio.js +5 -2
- package/dist/sds-radio/sds-radio.js.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.d.ts.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.js +5 -3
- package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
- package/dist/sds-select/sds-select.component.d.ts +2 -2
- package/dist/sds-select/sds-select.component.d.ts.map +1 -1
- package/dist/sds-select/sds-select.component.js +5 -3
- package/dist/sds-select/sds-select.component.js.map +1 -1
- package/dist/sds-switch/sds-switch.d.ts +2 -2
- package/dist/sds-switch/sds-switch.d.ts.map +1 -1
- package/dist/sds-switch/sds-switch.js.map +1 -1
- package/dist/sds-text/sds-text.styles.d.ts.map +1 -1
- package/dist/sds-text/sds-text.styles.js +193 -54
- package/dist/sds-text/sds-text.styles.js.map +1 -1
- package/dist/sds-textarea/sds-textarea.d.ts +2 -2
- package/dist/sds-textarea/sds-textarea.d.ts.map +1 -1
- package/dist/sds-textarea/sds-textarea.js +7 -3
- package/dist/sds-textarea/sds-textarea.js.map +1 -1
- package/dist/sds-textfield/sds-textfield.d.ts +2 -2
- package/dist/sds-textfield/sds-textfield.d.ts.map +1 -1
- package/dist/sds-textfield/sds-textfield.js +5 -2
- package/dist/sds-textfield/sds-textfield.js.map +1 -1
- package/dist/sds-tooltip/assets/tooltip-styles.d.ts +3 -0
- package/dist/sds-tooltip/assets/tooltip-styles.d.ts.map +1 -0
- package/dist/sds-tooltip/assets/tooltip-styles.js +3 -0
- package/dist/sds-tooltip/assets/tooltip-styles.js.map +1 -0
- package/dist/sds-tooltip/sds-tooltip.d.ts +35 -0
- package/dist/sds-tooltip/sds-tooltip.d.ts.map +1 -0
- package/dist/sds-tooltip/sds-tooltip.js +140 -0
- package/dist/sds-tooltip/sds-tooltip.js.map +1 -0
- package/dist/sds-tooltip/sds-tooltip.spec.d.ts +2 -0
- package/dist/sds-tooltip/sds-tooltip.spec.d.ts.map +1 -0
- package/dist/sds-tooltip/sds-tooltip.spec.js +35 -0
- package/dist/sds-tooltip/sds-tooltip.spec.js.map +1 -0
- package/dist/sds-tooltip/sds-tooltip.styles.d.ts +2 -0
- package/dist/sds-tooltip/sds-tooltip.styles.d.ts.map +1 -0
- package/dist/sds-tooltip/sds-tooltip.styles.js +87 -0
- package/dist/sds-tooltip/sds-tooltip.styles.js.map +1 -0
- package/dist/shared/positioning.d.ts +2 -0
- package/dist/shared/positioning.d.ts.map +1 -0
- package/dist/shared/positioning.js +2 -0
- package/dist/shared/positioning.js.map +1 -0
- package/dist/sheriff-web-components.js +576 -297
- package/package.json +14 -4
- package/web-types.json +460 -11
- /package/dist/{sds-popover → shared}/assets/positioning.js +0 -0
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import type {
|
|
2
|
+
import type { SDSFormControlAttributes } from '../mixins/sds-form-control-mixin';
|
|
3
3
|
import '../sds-alert/sds-alert';
|
|
4
4
|
import '../sds-icon/sds-icon';
|
|
5
5
|
import { SDS_SIZES } from '../types';
|
|
6
6
|
type InputType = 'hidden' | 'text' | 'search' | 'tel' | 'url' | 'email' | 'password' | 'datetime' | 'date' | 'month' | 'week' | 'time' | 'datetime-local' | 'number' | 'range' | 'color' | 'checkbox' | 'radio' | 'file' | 'submit' | 'image' | 'reset' | 'button';
|
|
7
7
|
type InputSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;
|
|
8
8
|
export type AutocompleteTypes = 'off' | 'on' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix' | 'nickname' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-extension' | 'impp' | 'url' | 'photo';
|
|
9
|
-
export interface SDSTextFieldProps extends
|
|
9
|
+
export interface SDSTextFieldProps extends SDSFormControlAttributes {
|
|
10
10
|
autocomplete?: AutocompleteTypes;
|
|
11
11
|
'error-message'?: string;
|
|
12
12
|
'help-text'?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-textfield.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"sds-textfield.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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"}
|
|
@@ -139,12 +139,13 @@ let SDSTextField = class SDSTextField extends SDSDelegateInteractionMixin(SDSEve
|
|
|
139
139
|
'sds-textfield--error': Boolean(this.errorMessage),
|
|
140
140
|
'sds-textfield--has-icon': this.hasIcon,
|
|
141
141
|
};
|
|
142
|
+
const describedBy = [this.errorMessage ? 'error-message' : null, this.helpText ? 'help-text' : null].filter(Boolean).join(' ') || undefined;
|
|
142
143
|
return html `
|
|
143
144
|
<div class="${classMap(textfieldClasses)}">
|
|
144
145
|
${this.label
|
|
145
146
|
? html `<label for="sds-textfield" class="sds-textfield__label">${this.readOnly ? html `<sds-icon name="lock-material-filled" size="m"></sds-icon>` : nothing}</sds-icon>${this.label}</label>`
|
|
146
147
|
: nothing}
|
|
147
|
-
${this.helpText ? html `<p class="sds-textfield__help-text">${this.helpText}</p>` : nothing}
|
|
148
|
+
${this.helpText ? html `<p id="help-text" class="sds-textfield__help-text">${this.helpText}</p>` : nothing}
|
|
148
149
|
<div class="sds-textfield__input-container">
|
|
149
150
|
<input
|
|
150
151
|
part="input"
|
|
@@ -161,6 +162,8 @@ let SDSTextField = class SDSTextField extends SDSDelegateInteractionMixin(SDSEve
|
|
|
161
162
|
pattern="${ifDefined(this.pattern)}"
|
|
162
163
|
minlength="${ifDefined(this.minlength)}"
|
|
163
164
|
maxlength="${ifDefined(this.maxlength)}"
|
|
165
|
+
aria-describedby="${ifDefined(describedBy)}"
|
|
166
|
+
aria-invalid="${this.errorMessage ? 'true' : 'false'}"
|
|
164
167
|
@input="${this._handleInputChange}"
|
|
165
168
|
@change="${this._handleInputChange}"
|
|
166
169
|
@select="${this._handleSelect}"
|
|
@@ -170,7 +173,7 @@ let SDSTextField = class SDSTextField extends SDSDelegateInteractionMixin(SDSEve
|
|
|
170
173
|
/>
|
|
171
174
|
<slot name="after" @slotchange="${this.handleSlotChange}" aria-hidden="true"></slot>
|
|
172
175
|
</div>
|
|
173
|
-
${this.errorMessage ? html `<sds-alert variant="secondary" data-palette="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : nothing}
|
|
176
|
+
${this.errorMessage ? html `<sds-alert id="error-message" variant="secondary" data-palette="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : nothing}
|
|
174
177
|
</div>
|
|
175
178
|
`;
|
|
176
179
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-textfield.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,uBAAuB,EAAE,2BAA2B,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAEtG,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAqGvB,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,2BAA2B,CAAC,uBAAuB,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC,CAAC;IAAhH;;QAIqC,SAAI,GAA8B,MAAM,CAAC;QAOxC,aAAQ,GAAkC,KAAK,CAAC;QAIjD,SAAI,GAA8B,IAAI,CAAC;QAElF,QAAQ;QACS,YAAO,GAAG,KAAK,CAAC;QAIzB,kBAAa,GAAkB,IAAI,CAAC;QAoB3B,qBAAgB,GAAG,CAAC,CAAQ,EAAE,EAAE;YAChD,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;YACzC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACjE,CAAC,CAAC;QAUe,uBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC3D,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,YAAY,gBAAgB,CAAC,EAAE,CAAC;gBAClE,OAAO;YACR,CAAC;YAED,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YAChC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACnE,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACvC,CAAC,CAAC;QAEe,kBAAa,GAAG,CAAC,KAAY,EAAE,EAAE;YACjD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACpB,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;YACrC,CAAC;QACF,CAAC,CAAC;QAEe,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;YACrD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;QACpC,CAAC,CAAC;QAEe,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACpD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;QACnC,CAAC,CAAC;QAEe,mBAAc,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC1D,KAAK,CAAC,wBAAwB,EAAE,CAAC;YAEjC,MAAM,cAAc,GAAG,IAAI,CAAC,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;YAEpE,IAAI,CAAC,cAAc;gBAAE,OAAO;YAE5B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;gBAEvB,IAAI,IAAI,EAAE,aAAa,EAAE,CAAC;oBACzB,8EAA8E;oBAC9E,6FAA6F;oBAC7F,IAAI,CAAC,aAAa,EAAE,CAAC;gBACtB,CAAC;qBAAM,CAAC;oBACP,IAAI,EAAE,MAAM,EAAE,CAAC;gBAChB,CAAC;YACF,CAAC;QACF,CAAC,CAAC;IA+FH,CAAC;IA9KS,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC;QACxC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACjD,CAAC;IAEQ,OAAO,CAAC,iBAAyD;QACzE,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;YAE9C,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;YACvC,CAAC;QACF,CAAC;IACF,CAAC;IAOO,cAAc;QACrB,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC;YAClC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACjG,CAAC;IACF,CAAC;IAoDD,iBAAiB;QAChB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAEhD,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,IAAI,EAAE,CAAC;QAC1C,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,QAAQ,CAAC;QAC9B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;IAC3C,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1D,CAAC;IAED,IAAI,cAAc,CAAC,KAAoB;QACtC,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACpC,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,KAAK,CAAC;QACrC,CAAC;IACF,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC;IACxD,CAAC;IACD,IAAI,YAAY,CAAC,KAAoB;QACpC,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACpC,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,KAAK,CAAC;QACnC,CAAC;IACF,CAAC;IAED,iBAAiB,CAAC,KAAa,EAAE,GAAW,EAAE,SAA2C;QACxF,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC;QACvD,CAAC;IACF,CAAC;IAED,aAAa;QACZ,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC;IACrC,CAAC;IAED,cAAc;QACb,OAAO,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC;IACtC,CAAC;IAED,iBAAiB,CAAC,OAAe;QAChC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QACxC,IAAI,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC;IAEQ,MAAM;QACd,MAAM,gBAAgB,GAAG;YACxB,eAAe,EAAE,IAAI;YACrB,sBAAsB,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC;YAClD,yBAAyB,EAAE,IAAI,CAAC,OAAO;SACvC,CAAC;QAEF,OAAO,IAAI,CAAA;iBACI,QAAQ,CAAC,gBAAgB,CAAC;MACrC,IAAI,CAAC,KAAK;YACX,CAAC,CAAC,IAAI,CAAA,2DAA2D,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,4DAA4D,CAAC,CAAC,CAAC,OAAO,cAAc,IAAI,CAAC,KAAK,UAAU;YAC7L,CAAC,CAAC,OAAO;MACR,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,uCAAuC,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC,CAAC,OAAO;;;;;cAKhF,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;mBAEf,IAAI,CAAC,QAAQ;mBACb,IAAI,CAAC,QAAQ;qBACX,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;gBAChC,IAAI,CAAC,KAAK,IAAI,EAAE;cAClB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;sBACZ,SAAS,CAAC,IAAI,CAAC,YAAmB,CAAC;mBACtC,IAAI,CAAC,QAAQ;iBACf,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;mBACrB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;mBACzB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;gBAC5B,IAAI,CAAC,kBAAkB;iBACtB,IAAI,CAAC,kBAAkB;iBACvB,IAAI,CAAC,aAAa;gBACnB,IAAI,CAAC,YAAY;eAClB,IAAI,CAAC,WAAW;kBACb,IAAI,CAAC,cAAc;;uCAEE,IAAI,CAAC,gBAAgB;;MAEtD,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,0EAA0E,IAAI,CAAC,YAAY,kBAAkB,CAAC,CAAC,CAAC,OAAO;;GAElJ,CAAC;IACH,CAAC;;AApMD,UAAU;AACM,mBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAES;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAA0C;AACxD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAoC;AACpB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAoC;AACnC;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgD;AACvB;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAA2C;AACtC;IAAtE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAmD;AAC9E;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAkD;AAChD;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAiD;AACjD;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAwC;AACvC;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAA4C;AAC3C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAA4C;AAC3C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAwC;AAGjE;IAAhB,KAAK,EAAE;6CAAyB;AAER;IAAxB,KAAK,CAAC,gBAAgB,CAAC;6CAA4B;AApBxC,YAAY;IADxB,oBAAoB,CAAC,eAAe,CAAC;GACzB,YAAY,CAsMxB","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { SDSEventDispatcherMixin, SDSDelegateInteractionMixin, SDSFormControlMixin } from '../mixins';\nimport type { SDSFormControlProps } from '../mixins/sds-form-control-mixin';\nimport { styles } from './sds-textfield.styles';\n\nimport '../sds-alert/sds-alert';\nimport '../sds-icon/sds-icon';\nimport { SDS_SIZES } from '../types';\n\ntype InputType =\n\t| 'hidden'\n\t| 'text'\n\t| 'search'\n\t| 'tel'\n\t| 'url'\n\t| 'email'\n\t| 'password'\n\t| 'datetime'\n\t| 'date'\n\t| 'month'\n\t| 'week'\n\t| 'time'\n\t| 'datetime-local'\n\t| 'number'\n\t| 'range'\n\t| 'color'\n\t| 'checkbox'\n\t| 'radio'\n\t| 'file'\n\t| 'submit'\n\t| 'image'\n\t| 'reset'\n\t| 'button';\n\ntype InputSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\nexport type AutocompleteTypes =\n\t| 'off'\n\t| 'on'\n\t| 'name'\n\t| 'honorific-prefix'\n\t| 'given-name'\n\t| 'additional-name'\n\t| 'family-name'\n\t| 'honorific-suffix'\n\t| 'nickname'\n\t| 'email'\n\t| 'username'\n\t| 'new-password'\n\t| 'current-password'\n\t| 'one-time-code'\n\t| 'organization-title'\n\t| 'organization'\n\t| 'street-address'\n\t| 'address-line1'\n\t| 'address-line2'\n\t| 'address-line3'\n\t| 'address-level4'\n\t| 'address-level3'\n\t| 'address-level2'\n\t| 'address-level1'\n\t| 'country'\n\t| 'country-name'\n\t| 'postal-code'\n\t| 'cc-name'\n\t| 'cc-given-name'\n\t| 'cc-additional-name'\n\t| 'cc-family-name'\n\t| 'cc-number'\n\t| 'cc-exp'\n\t| 'cc-exp-month'\n\t| 'cc-exp-year'\n\t| 'cc-csc'\n\t| 'cc-type'\n\t| 'transaction-currency'\n\t| 'transaction-amount'\n\t| 'language'\n\t| 'bday'\n\t| 'bday-day'\n\t| 'bday-month'\n\t| 'bday-year'\n\t| 'sex'\n\t| 'tel'\n\t| 'tel-country-code'\n\t| 'tel-national'\n\t| 'tel-area-code'\n\t| 'tel-local'\n\t| 'tel-extension'\n\t| 'impp'\n\t| 'url'\n\t| 'photo';\n\nexport interface SDSTextFieldProps extends SDSFormControlProps {\n\tautocomplete?: AutocompleteTypes;\n\t'error-message'?: string;\n\t'help-text'?: string;\n\tlabel?: string;\n\tmaxlength?: number;\n\tminlength?: number;\n\tpattern?: string;\n\tplaceholder?: string;\n\trequired?: boolean;\n\tsize?: InputSize;\n\ttype?: InputType;\n\tvalue?: string;\n}\n\n@guardedCustomElement('sds-textfield')\nexport class SDSTextField extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(LitElement))) {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) type: SDSTextFieldProps['type'] = 'text';\n\t@property({ type: String }) value?: SDSTextFieldProps['value'];\n\t@property({ type: String, reflect: true }) label?: SDSTextFieldProps['label'];\n\t@property({ type: String, reflect: true }) placeholder?: SDSTextFieldProps['placeholder'];\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: SDSTextFieldProps['help-text'];\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: SDSTextFieldProps['error-message'];\n\t@property({ type: String, reflect: true }) autocomplete?: SDSTextFieldProps['autocomplete'];\n\t@property({ type: Boolean, reflect: true }) required: SDSTextFieldProps['required'] = false;\n\t@property({ type: String, reflect: true }) pattern?: SDSTextFieldProps['pattern'];\n\t@property({ type: Number, reflect: true }) minlength?: SDSTextFieldProps['minlength'];\n\t@property({ type: Number, reflect: true }) maxlength?: SDSTextFieldProps['maxlength'];\n\t@property({ type: String, reflect: true }) size: SDSTextFieldProps['size'] = 'md';\n\n\t// State\n\t@state() private hasIcon = false;\n\n\t@query('#sds-textfield') control!: HTMLInputElement;\n\n\tprivate _defaultValue: string | null = null;\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? null;\n\t\tthis.internals.setFormValue(this._defaultValue);\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\n\t\tif (changedProperties.has('value')) {\n\t\t\tthis.internals.setFormValue(this.value ?? '');\n\n\t\t\tif (this.control) {\n\t\t\t\tthis.control.value = this.value ?? '';\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate readonly handleSlotChange = (e: Event) => {\n\t\tconst slot = e.target as HTMLSlotElement;\n\t\tthis.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\n\t};\n\n\tprivate updateValidity() {\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate readonly _handleInputChange = (event: InputEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (this.disabled || !(event.target instanceof HTMLInputElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = event.target.value;\n\t\tthis.internals.setFormValue(this.value === '' ? null : this.value);\n\t\tthis.updateValidity();\n\t\tthis.dispatchSheriffEvent(event.type);\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchSheriffEvent('select');\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchSheriffEvent('focus');\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchSheriffEvent('blur');\n\t};\n\n\tprivate readonly _handleKeyDown = (event: KeyboardEvent) => {\n\t\tevent.stopImmediatePropagation();\n\n\t\tconst shouldContinue = this.dispatchKeyboardEvent('keydown', event);\n\n\t\tif (!shouldContinue) return;\n\n\t\tif (event.key === 'Enter') {\n\t\t\tconst form = this.form;\n\n\t\t\tif (form?.requestSubmit) {\n\t\t\t\t// Try to use requestSubmit as this will run form validation before submitting\n\t\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit#usage_notes\n\t\t\t\tform.requestSubmit();\n\t\t\t} else {\n\t\t\t\tform?.submit();\n\t\t\t}\n\t\t}\n\t};\n\n\tformResetCallback() {\n\t\tthis.internals.setFormValue(this._defaultValue);\n\n\t\tconst newValue = this._defaultValue ?? '';\n\t\tthis.control.value = newValue;\n\t\tthis.value = newValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\tget selectionStart(): number | null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number | null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst textfieldClasses = {\n\t\t\t'sds-textfield': true,\n\t\t\t'sds-textfield--error': Boolean(this.errorMessage),\n\t\t\t'sds-textfield--has-icon': this.hasIcon,\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textfieldClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html`<label for=\"sds-textfield\" class=\"sds-textfield__label\">${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"m\"></sds-icon>` : nothing}</sds-icon>${this.label}</label>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-textfield__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-textfield__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tpart=\"input\"\n\t\t\t\t\t\tclass=\"sds-textfield__input\"\n\t\t\t\t\t\ttype=\"${ifDefined(this.type)}\"\n\t\t\t\t\t\tid=\"sds-textfield\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\t.value=\"${this.value ?? ''}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tautocomplete=\"${ifDefined(this.autocomplete as any)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\tpattern=\"${ifDefined(this.pattern)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t\t@keydown=\"${this._handleKeyDown}\"\n\t\t\t\t\t/>\n\t\t\t\t\t<slot name=\"after\" @slotchange=\"${this.handleSlotChange}\" aria-hidden=\"true\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage ? html`<sds-alert variant=\"secondary\" data-palette=\"danger\"><p slot=\"message\">${this.errorMessage}</p></sds-alert>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textfield': SDSTextField;\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sds-textfield.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { SDSEventDispatcherMixin, SDSDelegateInteractionMixin, SDSFormControlMixin } from '../mixins';\nimport type { SDSFormControlAttributes } from '../mixins/sds-form-control-mixin';\nimport { styles } from './sds-textfield.styles';\n\nimport '../sds-alert/sds-alert';\nimport '../sds-icon/sds-icon';\nimport { SDS_SIZES } from '../types';\n\ntype InputType =\n\t| 'hidden'\n\t| 'text'\n\t| 'search'\n\t| 'tel'\n\t| 'url'\n\t| 'email'\n\t| 'password'\n\t| 'datetime'\n\t| 'date'\n\t| 'month'\n\t| 'week'\n\t| 'time'\n\t| 'datetime-local'\n\t| 'number'\n\t| 'range'\n\t| 'color'\n\t| 'checkbox'\n\t| 'radio'\n\t| 'file'\n\t| 'submit'\n\t| 'image'\n\t| 'reset'\n\t| 'button';\n\ntype InputSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\nexport type AutocompleteTypes =\n\t| 'off'\n\t| 'on'\n\t| 'name'\n\t| 'honorific-prefix'\n\t| 'given-name'\n\t| 'additional-name'\n\t| 'family-name'\n\t| 'honorific-suffix'\n\t| 'nickname'\n\t| 'email'\n\t| 'username'\n\t| 'new-password'\n\t| 'current-password'\n\t| 'one-time-code'\n\t| 'organization-title'\n\t| 'organization'\n\t| 'street-address'\n\t| 'address-line1'\n\t| 'address-line2'\n\t| 'address-line3'\n\t| 'address-level4'\n\t| 'address-level3'\n\t| 'address-level2'\n\t| 'address-level1'\n\t| 'country'\n\t| 'country-name'\n\t| 'postal-code'\n\t| 'cc-name'\n\t| 'cc-given-name'\n\t| 'cc-additional-name'\n\t| 'cc-family-name'\n\t| 'cc-number'\n\t| 'cc-exp'\n\t| 'cc-exp-month'\n\t| 'cc-exp-year'\n\t| 'cc-csc'\n\t| 'cc-type'\n\t| 'transaction-currency'\n\t| 'transaction-amount'\n\t| 'language'\n\t| 'bday'\n\t| 'bday-day'\n\t| 'bday-month'\n\t| 'bday-year'\n\t| 'sex'\n\t| 'tel'\n\t| 'tel-country-code'\n\t| 'tel-national'\n\t| 'tel-area-code'\n\t| 'tel-local'\n\t| 'tel-extension'\n\t| 'impp'\n\t| 'url'\n\t| 'photo';\n\nexport interface SDSTextFieldProps extends SDSFormControlAttributes {\n\tautocomplete?: AutocompleteTypes;\n\t'error-message'?: string;\n\t'help-text'?: string;\n\tlabel?: string;\n\tmaxlength?: number;\n\tminlength?: number;\n\tpattern?: string;\n\tplaceholder?: string;\n\trequired?: boolean;\n\tsize?: InputSize;\n\ttype?: InputType;\n\tvalue?: string;\n}\n\n@guardedCustomElement('sds-textfield')\nexport class SDSTextField extends SDSDelegateInteractionMixin(SDSEventDispatcherMixin(SDSFormControlMixin(LitElement))) {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) type: SDSTextFieldProps['type'] = 'text';\n\t@property({ type: String }) value?: SDSTextFieldProps['value'];\n\t@property({ type: String, reflect: true }) label?: SDSTextFieldProps['label'];\n\t@property({ type: String, reflect: true }) placeholder?: SDSTextFieldProps['placeholder'];\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: SDSTextFieldProps['help-text'];\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: SDSTextFieldProps['error-message'];\n\t@property({ type: String, reflect: true }) autocomplete?: SDSTextFieldProps['autocomplete'];\n\t@property({ type: Boolean, reflect: true }) required: SDSTextFieldProps['required'] = false;\n\t@property({ type: String, reflect: true }) pattern?: SDSTextFieldProps['pattern'];\n\t@property({ type: Number, reflect: true }) minlength?: SDSTextFieldProps['minlength'];\n\t@property({ type: Number, reflect: true }) maxlength?: SDSTextFieldProps['maxlength'];\n\t@property({ type: String, reflect: true }) size: SDSTextFieldProps['size'] = 'md';\n\n\t// State\n\t@state() private hasIcon = false;\n\n\t@query('#sds-textfield') control!: HTMLInputElement;\n\n\tprivate _defaultValue: string | null = null;\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? null;\n\t\tthis.internals.setFormValue(this._defaultValue);\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\n\t\tif (changedProperties.has('value')) {\n\t\t\tthis.internals.setFormValue(this.value ?? '');\n\n\t\t\tif (this.control) {\n\t\t\t\tthis.control.value = this.value ?? '';\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate readonly handleSlotChange = (e: Event) => {\n\t\tconst slot = e.target as HTMLSlotElement;\n\t\tthis.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\n\t};\n\n\tprivate updateValidity() {\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate readonly _handleInputChange = (event: InputEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (this.disabled || !(event.target instanceof HTMLInputElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = event.target.value;\n\t\tthis.internals.setFormValue(this.value === '' ? null : this.value);\n\t\tthis.updateValidity();\n\t\tthis.dispatchSheriffEvent(event.type);\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchSheriffEvent('select');\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchSheriffEvent('focus');\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchSheriffEvent('blur');\n\t};\n\n\tprivate readonly _handleKeyDown = (event: KeyboardEvent) => {\n\t\tevent.stopImmediatePropagation();\n\n\t\tconst shouldContinue = this.dispatchKeyboardEvent('keydown', event);\n\n\t\tif (!shouldContinue) return;\n\n\t\tif (event.key === 'Enter') {\n\t\t\tconst form = this.form;\n\n\t\t\tif (form?.requestSubmit) {\n\t\t\t\t// Try to use requestSubmit as this will run form validation before submitting\n\t\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit#usage_notes\n\t\t\t\tform.requestSubmit();\n\t\t\t} else {\n\t\t\t\tform?.submit();\n\t\t\t}\n\t\t}\n\t};\n\n\tformResetCallback() {\n\t\tthis.internals.setFormValue(this._defaultValue);\n\n\t\tconst newValue = this._defaultValue ?? '';\n\t\tthis.control.value = newValue;\n\t\tthis.value = newValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\tget selectionStart(): number | null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number | null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst textfieldClasses = {\n\t\t\t'sds-textfield': true,\n\t\t\t'sds-textfield--error': Boolean(this.errorMessage),\n\t\t\t'sds-textfield--has-icon': this.hasIcon,\n\t\t};\n\n\t\tconst describedBy = [this.errorMessage ? 'error-message' : null, this.helpText ? 'help-text' : null].filter(Boolean).join(' ') || undefined;\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textfieldClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html`<label for=\"sds-textfield\" class=\"sds-textfield__label\">${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"m\"></sds-icon>` : nothing}</sds-icon>${this.label}</label>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p id=\"help-text\" class=\"sds-textfield__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-textfield__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tpart=\"input\"\n\t\t\t\t\t\tclass=\"sds-textfield__input\"\n\t\t\t\t\t\ttype=\"${ifDefined(this.type)}\"\n\t\t\t\t\t\tid=\"sds-textfield\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\t.value=\"${this.value ?? ''}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tautocomplete=\"${ifDefined(this.autocomplete as any)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\tpattern=\"${ifDefined(this.pattern)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\taria-describedby=\"${ifDefined(describedBy)}\"\n\t\t\t\t\t\taria-invalid=\"${this.errorMessage ? 'true' : 'false'}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t\t@keydown=\"${this._handleKeyDown}\"\n\t\t\t\t\t/>\n\t\t\t\t\t<slot name=\"after\" @slotchange=\"${this.handleSlotChange}\" aria-hidden=\"true\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage ? html`<sds-alert id=\"error-message\" variant=\"secondary\" data-palette=\"danger\"><p slot=\"message\">${this.errorMessage}</p></sds-alert>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textfield': SDSTextField;\n\t}\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltip-styles.d.ts","sourceRoot":"","sources":["../../../src/sds-tooltip/assets/tooltip-styles.ts"],"names":[],"mappings":"AAAA,QAAA,IAAI,CAAC,QAA08E,CAAC;AAAA,OAAM,EAAC,CAAC,IAAI,OAAO,EAAC,CAAC"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
var t = '[data-tooltip]{--ds-tooltip:"";--_ds-data-tooltip:var(--ds-tooltip)}:host{--_ds-floating:top;--_ds-floating-arrow-size:0;--_ds-floating-arrow-visibility:inherit;animation:ds-fade-in .15s ease-in-out forwards;inset:0 auto auto 0;margin:0;overflow:visible;position:absolute}:host:before{background:inherit;border:inherit;border-left-color:transparent;border-top-color:transparent;box-sizing:border-box;content:"";height:var(--_ds-floating-arrow-size);left:var(--_ds-floating-arrow-x,50%);position:absolute;rotate:45deg;top:var(--_ds-floating-arrow-y,100%);translate:-50% -50%;visibility:var(--_ds-floating-arrow-visibility);width:var(--_ds-floating-arrow-size)}:host[data-overscroll=contain]{--_ds-floating-overscroll:contain;overflow:auto;overscroll-behavior:contain}:host{--_ds-floating:var(--dsc-tooltip-placement);--_ds-floating-arrow-size:var(--dsc-tooltip-arrow-size);--dsc-tooltip-background:var(--ds-color-neutral-text-default);--dsc-tooltip-color:var(--ds-color-neutral-background-default);--dsc-tooltip-border-radius:var(--ds-border-radius-default);--dsc-tooltip-padding:var(--ds-size-1) var(--ds-size-2);--dsc-tooltip-arrow-size:var(--ds-size-2);--dsc-tooltip-transition-duration:0.2s;--dsc-tooltip-transition-delay:150ms;--dsc-tooltip-placement:top;background:var(--dsc-tooltip-background);border:0;border-radius:var(--dsc-tooltip-border-radius);box-sizing:border-box;color:var(--dsc-tooltip-color);line-height:var(--ds-line-height-sm);padding:var(--dsc-tooltip-padding);view-transition-name:ds-tooltip;&[data-floating|=top]:before{rotate:45deg;top:100%}&[data-floating|=right]:before{left:0;rotate:135deg}&[data-floating|=bottom]:before{rotate:-135deg;top:0}&[data-floating|=left]:before{left:100%;rotate:-45deg}}:host:after{box-sizing:border-box;content:"";height:var(--_dsc-tooltip-safearea-height,0);left:var(--_ds-floating-arrow-x,50%);position:absolute;top:var(--_ds-floating-arrow-y,100%);translate:var(--_dsc-tooltip-safearea-translate);width:var(--_dsc-tooltip-safearea-width,0)}:host[data-floating=bottom]:after,:host[data-floating=top]:after{height:var(--dsc-tooltip-arrow-size);left:0;top:100%;width:100%}:host[data-floating=left]:after,:host[data-floating=right]:after{height:100%;left:100%;top:0;width:var(--dsc-tooltip-arrow-size)}:host[data-floating=bottom]:after{top:calc(var(--dsc-tooltip-arrow-size)*-1)}:host[data-floating=right]:after{left:calc(var(--dsc-tooltip-arrow-size)*-1)}:host:not([popover]){display:none}@media (forced-colors:active){:host{background:CanvasText}}';
|
|
2
|
+
export { t as default };
|
|
3
|
+
//# sourceMappingURL=tooltip-styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltip-styles.js","sourceRoot":"","sources":["../../../src/sds-tooltip/assets/tooltip-styles.ts"],"names":[],"mappings":"AAAA,IAAI,CAAC,GAAC,y8EAAy8E,CAAC;AAAA,OAAM,EAAC,CAAC,IAAI,OAAO,EAAC,CAAC","sourcesContent":["var t='[data-tooltip]{--ds-tooltip:\"\";--_ds-data-tooltip:var(--ds-tooltip)}:host{--_ds-floating:top;--_ds-floating-arrow-size:0;--_ds-floating-arrow-visibility:inherit;animation:ds-fade-in .15s ease-in-out forwards;inset:0 auto auto 0;margin:0;overflow:visible;position:absolute}:host:before{background:inherit;border:inherit;border-left-color:transparent;border-top-color:transparent;box-sizing:border-box;content:\"\";height:var(--_ds-floating-arrow-size);left:var(--_ds-floating-arrow-x,50%);position:absolute;rotate:45deg;top:var(--_ds-floating-arrow-y,100%);translate:-50% -50%;visibility:var(--_ds-floating-arrow-visibility);width:var(--_ds-floating-arrow-size)}:host[data-overscroll=contain]{--_ds-floating-overscroll:contain;overflow:auto;overscroll-behavior:contain}:host{--_ds-floating:var(--dsc-tooltip-placement);--_ds-floating-arrow-size:var(--dsc-tooltip-arrow-size);--dsc-tooltip-background:var(--ds-color-neutral-text-default);--dsc-tooltip-color:var(--ds-color-neutral-background-default);--dsc-tooltip-border-radius:var(--ds-border-radius-default);--dsc-tooltip-padding:var(--ds-size-1) var(--ds-size-2);--dsc-tooltip-arrow-size:var(--ds-size-2);--dsc-tooltip-transition-duration:0.2s;--dsc-tooltip-transition-delay:150ms;--dsc-tooltip-placement:top;background:var(--dsc-tooltip-background);border:0;border-radius:var(--dsc-tooltip-border-radius);box-sizing:border-box;color:var(--dsc-tooltip-color);line-height:var(--ds-line-height-sm);padding:var(--dsc-tooltip-padding);view-transition-name:ds-tooltip;&[data-floating|=top]:before{rotate:45deg;top:100%}&[data-floating|=right]:before{left:0;rotate:135deg}&[data-floating|=bottom]:before{rotate:-135deg;top:0}&[data-floating|=left]:before{left:100%;rotate:-45deg}}:host:after{box-sizing:border-box;content:\"\";height:var(--_dsc-tooltip-safearea-height,0);left:var(--_ds-floating-arrow-x,50%);position:absolute;top:var(--_ds-floating-arrow-y,100%);translate:var(--_dsc-tooltip-safearea-translate);width:var(--_dsc-tooltip-safearea-width,0)}:host[data-floating=bottom]:after,:host[data-floating=top]:after{height:var(--dsc-tooltip-arrow-size);left:0;top:100%;width:100%}:host[data-floating=left]:after,:host[data-floating=right]:after{height:100%;left:100%;top:0;width:var(--dsc-tooltip-arrow-size)}:host[data-floating=bottom]:after{top:calc(var(--dsc-tooltip-arrow-size)*-1)}:host[data-floating=right]:after{left:calc(var(--dsc-tooltip-arrow-size)*-1)}:host:not([popover]){display:none}@media (forced-colors:active){:host{background:CanvasText}}';export{t as default};\n"]}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import '../shared/positioning.js';
|
|
3
|
+
type SDSTooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
|
|
4
|
+
export interface SDSTooltipProps {
|
|
5
|
+
id: string;
|
|
6
|
+
placement?: SDSTooltipPlacement;
|
|
7
|
+
}
|
|
8
|
+
declare const SDSTooltip_base: import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & typeof LitElement;
|
|
9
|
+
export declare class SDSTooltip extends SDSTooltip_base {
|
|
10
|
+
static styles: import("lit").CSSResult[];
|
|
11
|
+
placement: SDSTooltipPlacement;
|
|
12
|
+
private triggers;
|
|
13
|
+
private cleanups;
|
|
14
|
+
private hoverTimeout;
|
|
15
|
+
private activeTrigger;
|
|
16
|
+
connectedCallback(): void;
|
|
17
|
+
updated(changed: Map<string, unknown>): void;
|
|
18
|
+
disconnectedCallback(): void;
|
|
19
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
20
|
+
private syncTriggerLabels;
|
|
21
|
+
private bindTriggers;
|
|
22
|
+
private onSelfMouseEnter;
|
|
23
|
+
private onSelfMouseLeave;
|
|
24
|
+
private show;
|
|
25
|
+
private hide;
|
|
26
|
+
private scheduleHide;
|
|
27
|
+
private onKeyDown;
|
|
28
|
+
}
|
|
29
|
+
declare global {
|
|
30
|
+
interface HTMLElementTagNameMap {
|
|
31
|
+
'sds-tooltip': SDSTooltip;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
export {};
|
|
35
|
+
//# sourceMappingURL=sds-tooltip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-tooltip.d.ts","sourceRoot":"","sources":["../../src/sds-tooltip/sds-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,0BAA0B,CAAC;AAGlC,KAAK,mBAAmB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/D,MAAM,WAAW,eAAe;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,mBAAmB,CAAC;CAChC;;AAED,qBACa,UAAW,SAAQ,eAAmC;IAClE,OAAgB,MAAM,4BAAY;IAGlC,SAAS,EAAE,mBAAmB,CAAS;IAEvC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,YAAY,CAA4C;IAChE,OAAO,CAAC,aAAa,CAA0B;IAEtC,iBAAiB;IAajB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMrC,oBAAoB;IAYpB,MAAM;IAIf,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,YAAY;IAsCpB,OAAO,CAAC,gBAAgB,CAEtB;IACF,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,IAAI;IAeZ,OAAO,CAAC,IAAI;IAaZ,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,SAAS,CAIf;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html } from 'lit';
|
|
8
|
+
import { property } from 'lit/decorators.js';
|
|
9
|
+
import { guardedCustomElement } from '../utils/guarded-custom-element';
|
|
10
|
+
import { styles } from './sds-tooltip.styles';
|
|
11
|
+
import '../shared/positioning.js';
|
|
12
|
+
import { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';
|
|
13
|
+
let SDSTooltip = class SDSTooltip extends SDSEventDispatcherMixin(LitElement) {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments);
|
|
16
|
+
this.placement = 'top';
|
|
17
|
+
this.triggers = [];
|
|
18
|
+
this.cleanups = [];
|
|
19
|
+
this.onSelfMouseEnter = () => {
|
|
20
|
+
clearTimeout(this.hoverTimeout);
|
|
21
|
+
};
|
|
22
|
+
this.onSelfMouseLeave = () => this.hide();
|
|
23
|
+
this.onKeyDown = (e) => {
|
|
24
|
+
if (e.key === 'Escape') {
|
|
25
|
+
this.hide();
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
connectedCallback() {
|
|
30
|
+
super.connectedCallback();
|
|
31
|
+
this.setAttribute('role', 'tooltip');
|
|
32
|
+
this.setAttribute('popover', 'manual');
|
|
33
|
+
// Avoid screen readers entering the tooltip
|
|
34
|
+
// Rather set the tooltip's text as an aria-label on the trigger element
|
|
35
|
+
this.setAttribute('aria-hidden', 'true');
|
|
36
|
+
this.dataset.placement = this.placement;
|
|
37
|
+
this.bindTriggers();
|
|
38
|
+
// Defer to allow triggers to complete their first render
|
|
39
|
+
requestAnimationFrame(() => this.syncTriggerLabels());
|
|
40
|
+
}
|
|
41
|
+
updated(changed) {
|
|
42
|
+
if (changed.has('placement')) {
|
|
43
|
+
this.dataset.placement = this.placement;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
disconnectedCallback() {
|
|
47
|
+
super.disconnectedCallback();
|
|
48
|
+
clearTimeout(this.hoverTimeout);
|
|
49
|
+
document.removeEventListener('keydown', this.onKeyDown);
|
|
50
|
+
for (const cleanup of this.cleanups) {
|
|
51
|
+
cleanup();
|
|
52
|
+
}
|
|
53
|
+
this.cleanups = [];
|
|
54
|
+
this.triggers = [];
|
|
55
|
+
this.activeTrigger = undefined;
|
|
56
|
+
}
|
|
57
|
+
render() {
|
|
58
|
+
return html `<slot @slotchange=${this.syncTriggerLabels}></slot>`;
|
|
59
|
+
}
|
|
60
|
+
syncTriggerLabels() {
|
|
61
|
+
const text = this.textContent?.trim() ?? '';
|
|
62
|
+
if (!text) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
this.triggers.map((trigger) => {
|
|
66
|
+
const element = trigger.shadowRoot?.querySelector('button, a') ?? trigger;
|
|
67
|
+
this.cleanups.push(() => element.removeAttribute('aria-label'));
|
|
68
|
+
element.setAttribute('aria-label', text);
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
bindTriggers() {
|
|
72
|
+
if (!this.id)
|
|
73
|
+
return;
|
|
74
|
+
this.triggers = [...document.querySelectorAll('[aria-describedby]')].filter((trigger) => {
|
|
75
|
+
const describedBy = trigger.getAttribute('aria-describedby');
|
|
76
|
+
// `aria-describedby` is a space-separated ID list, e.g. "field-help tooltip-id".
|
|
77
|
+
// `/\s+/` splits on one or more whitespace characters so we can match this tooltip's id.
|
|
78
|
+
return describedBy?.split(/\s+/).includes(this.id) ?? false;
|
|
79
|
+
});
|
|
80
|
+
for (const trigger of this.triggers) {
|
|
81
|
+
const onMouseEnter = () => this.show(trigger);
|
|
82
|
+
const onMouseLeave = () => this.scheduleHide();
|
|
83
|
+
const onFocusIn = () => this.show(trigger);
|
|
84
|
+
const onFocusOut = () => this.hide();
|
|
85
|
+
trigger.addEventListener('mouseenter', onMouseEnter);
|
|
86
|
+
trigger.addEventListener('mouseleave', onMouseLeave);
|
|
87
|
+
trigger.addEventListener('focusin', onFocusIn);
|
|
88
|
+
trigger.addEventListener('focusout', onFocusOut);
|
|
89
|
+
this.cleanups.push(() => {
|
|
90
|
+
trigger.removeEventListener('mouseenter', onMouseEnter);
|
|
91
|
+
trigger.removeEventListener('mouseleave', onMouseLeave);
|
|
92
|
+
trigger.removeEventListener('focusin', onFocusIn);
|
|
93
|
+
trigger.removeEventListener('focusout', onFocusOut);
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
// Hovering the tooltip itself keeps it open (MDN pattern)
|
|
97
|
+
this.addEventListener('mouseenter', this.onSelfMouseEnter);
|
|
98
|
+
this.addEventListener('mouseleave', this.onSelfMouseLeave);
|
|
99
|
+
this.cleanups.push(() => {
|
|
100
|
+
this.removeEventListener('mouseenter', this.onSelfMouseEnter);
|
|
101
|
+
this.removeEventListener('mouseleave', this.onSelfMouseLeave);
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
show(trigger) {
|
|
105
|
+
clearTimeout(this.hoverTimeout);
|
|
106
|
+
if (!this.matches(':popover-open')) {
|
|
107
|
+
this.showPopover();
|
|
108
|
+
}
|
|
109
|
+
if (this.activeTrigger !== trigger) {
|
|
110
|
+
this.activeTrigger = trigger;
|
|
111
|
+
this.dispatchSheriffEvent('toggle', trigger);
|
|
112
|
+
}
|
|
113
|
+
document.addEventListener('keydown', this.onKeyDown);
|
|
114
|
+
}
|
|
115
|
+
hide() {
|
|
116
|
+
clearTimeout(this.hoverTimeout);
|
|
117
|
+
try {
|
|
118
|
+
this.hidePopover();
|
|
119
|
+
}
|
|
120
|
+
catch {
|
|
121
|
+
// Already hidden
|
|
122
|
+
}
|
|
123
|
+
this.activeTrigger = undefined;
|
|
124
|
+
document.removeEventListener('keydown', this.onKeyDown);
|
|
125
|
+
}
|
|
126
|
+
scheduleHide() {
|
|
127
|
+
clearTimeout(this.hoverTimeout);
|
|
128
|
+
// Grace period to let cursor travel from trigger to tooltip
|
|
129
|
+
this.hoverTimeout = setTimeout(() => this.hide(), 200);
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
SDSTooltip.styles = [styles];
|
|
133
|
+
__decorate([
|
|
134
|
+
property({ type: String, reflect: true })
|
|
135
|
+
], SDSTooltip.prototype, "placement", void 0);
|
|
136
|
+
SDSTooltip = __decorate([
|
|
137
|
+
guardedCustomElement('sds-tooltip')
|
|
138
|
+
], SDSTooltip);
|
|
139
|
+
export { SDSTooltip };
|
|
140
|
+
//# sourceMappingURL=sds-tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-tooltip.js","sourceRoot":"","sources":["../../src/sds-tooltip/sds-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-tooltip.styles';\nimport '../shared/positioning.js';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\n\ntype SDSTooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\n\nexport interface SDSTooltipProps {\n\tid: string;\n\tplacement?: SDSTooltipPlacement;\n}\n\n@guardedCustomElement('sds-tooltip')\nexport class SDSTooltip extends SDSEventDispatcherMixin(LitElement) {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true })\n\tplacement: SDSTooltipPlacement = 'top';\n\n\tprivate triggers: HTMLElement[] = [];\n\tprivate cleanups: (() => void)[] = [];\n\tprivate hoverTimeout: ReturnType<typeof setTimeout> | undefined;\n\tprivate activeTrigger: HTMLElement | undefined;\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.setAttribute('role', 'tooltip');\n\t\tthis.setAttribute('popover', 'manual');\n\t\t// Avoid screen readers entering the tooltip\n\t\t// Rather set the tooltip's text as an aria-label on the trigger element\n\t\tthis.setAttribute('aria-hidden', 'true');\n\t\tthis.dataset.placement = this.placement;\n\t\tthis.bindTriggers();\n\t\t// Defer to allow triggers to complete their first render\n\t\trequestAnimationFrame(() => this.syncTriggerLabels());\n\t}\n\n\toverride updated(changed: Map<string, unknown>) {\n\t\tif (changed.has('placement')) {\n\t\t\tthis.dataset.placement = this.placement;\n\t\t}\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tclearTimeout(this.hoverTimeout);\n\t\tdocument.removeEventListener('keydown', this.onKeyDown);\n\t\tfor (const cleanup of this.cleanups) {\n\t\t\tcleanup();\n\t\t}\n\t\tthis.cleanups = [];\n\t\tthis.triggers = [];\n\t\tthis.activeTrigger = undefined;\n\t}\n\n\toverride render() {\n\t\treturn html`<slot @slotchange=${this.syncTriggerLabels}></slot>`;\n\t}\n\n\tprivate syncTriggerLabels() {\n\t\tconst text = this.textContent?.trim() ?? '';\n\t\tif (!text) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.triggers.map((trigger) => {\n\t\t\tconst element = trigger.shadowRoot?.querySelector<HTMLElement>('button, a') ?? trigger;\n\t\t\tthis.cleanups.push(() => element.removeAttribute('aria-label'));\n\t\t\telement.setAttribute('aria-label', text);\n\t\t});\n\t}\n\n\tprivate bindTriggers() {\n\t\tif (!this.id) return;\n\n\t\tthis.triggers = [...document.querySelectorAll<HTMLElement>('[aria-describedby]')].filter((trigger) => {\n\t\t\tconst describedBy = trigger.getAttribute('aria-describedby');\n\t\t\t// `aria-describedby` is a space-separated ID list, e.g. \"field-help tooltip-id\".\n\t\t\t// `/\\s+/` splits on one or more whitespace characters so we can match this tooltip's id.\n\t\t\treturn describedBy?.split(/\\s+/).includes(this.id) ?? false;\n\t\t});\n\n\t\tfor (const trigger of this.triggers) {\n\t\t\tconst onMouseEnter = () => this.show(trigger);\n\t\t\tconst onMouseLeave = () => this.scheduleHide();\n\t\t\tconst onFocusIn = () => this.show(trigger);\n\t\t\tconst onFocusOut = () => this.hide();\n\n\t\t\ttrigger.addEventListener('mouseenter', onMouseEnter);\n\t\t\ttrigger.addEventListener('mouseleave', onMouseLeave);\n\t\t\ttrigger.addEventListener('focusin', onFocusIn);\n\t\t\ttrigger.addEventListener('focusout', onFocusOut);\n\n\t\t\tthis.cleanups.push(() => {\n\t\t\t\ttrigger.removeEventListener('mouseenter', onMouseEnter);\n\t\t\t\ttrigger.removeEventListener('mouseleave', onMouseLeave);\n\t\t\t\ttrigger.removeEventListener('focusin', onFocusIn);\n\t\t\t\ttrigger.removeEventListener('focusout', onFocusOut);\n\t\t\t});\n\t\t}\n\n\t\t// Hovering the tooltip itself keeps it open (MDN pattern)\n\t\tthis.addEventListener('mouseenter', this.onSelfMouseEnter);\n\t\tthis.addEventListener('mouseleave', this.onSelfMouseLeave);\n\t\tthis.cleanups.push(() => {\n\t\t\tthis.removeEventListener('mouseenter', this.onSelfMouseEnter);\n\t\t\tthis.removeEventListener('mouseleave', this.onSelfMouseLeave);\n\t\t});\n\t}\n\n\tprivate onSelfMouseEnter = () => {\n\t\tclearTimeout(this.hoverTimeout);\n\t};\n\tprivate onSelfMouseLeave = () => this.hide();\n\n\tprivate show(trigger: HTMLElement) {\n\t\tclearTimeout(this.hoverTimeout);\n\n\t\tif (!this.matches(':popover-open')) {\n\t\t\tthis.showPopover();\n\t\t}\n\n\t\tif (this.activeTrigger !== trigger) {\n\t\t\tthis.activeTrigger = trigger;\n\t\t\tthis.dispatchSheriffEvent('toggle', trigger);\n\t\t}\n\n\t\tdocument.addEventListener('keydown', this.onKeyDown);\n\t}\n\n\tprivate hide() {\n\t\tclearTimeout(this.hoverTimeout);\n\n\t\ttry {\n\t\t\tthis.hidePopover();\n\t\t} catch {\n\t\t\t// Already hidden\n\t\t}\n\n\t\tthis.activeTrigger = undefined;\n\t\tdocument.removeEventListener('keydown', this.onKeyDown);\n\t}\n\n\tprivate scheduleHide() {\n\t\tclearTimeout(this.hoverTimeout);\n\t\t// Grace period to let cursor travel from trigger to tooltip\n\t\tthis.hoverTimeout = setTimeout(() => this.hide(), 200);\n\t}\n\n\tprivate onKeyDown = (e: KeyboardEvent) => {\n\t\tif (e.key === 'Escape') {\n\t\t\tthis.hide();\n\t\t}\n\t};\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-tooltip': SDSTooltip;\n\t}\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-tooltip.spec.d.ts","sourceRoot":"","sources":["../../src/sds-tooltip/sds-tooltip.spec.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { test, expect } from '@playwright/test';
|
|
2
|
+
test.describe('tooltip-component', () => {
|
|
3
|
+
test.beforeEach(async ({ page }) => {
|
|
4
|
+
await page.goto('iframe.html?viewMode=story&id=komponenter-tooltip--default');
|
|
5
|
+
});
|
|
6
|
+
test('is hidden by default', async ({ page }) => {
|
|
7
|
+
const tooltip = page.locator('#tooltip-default');
|
|
8
|
+
await expect(tooltip).not.toBeVisible();
|
|
9
|
+
});
|
|
10
|
+
test('shows on hover', async ({ page }) => {
|
|
11
|
+
const trigger = page.locator('sds-text[aria-describedby="tooltip-default"]');
|
|
12
|
+
const tooltip = page.locator('#tooltip-default');
|
|
13
|
+
await trigger.hover();
|
|
14
|
+
await expect(tooltip).toBeVisible();
|
|
15
|
+
});
|
|
16
|
+
test('shows on focus', async ({ page }) => {
|
|
17
|
+
const trigger = page.locator('sds-text[aria-describedby="tooltip-default"]');
|
|
18
|
+
const tooltip = page.locator('#tooltip-default');
|
|
19
|
+
await trigger.focus();
|
|
20
|
+
await expect(tooltip).toBeVisible();
|
|
21
|
+
});
|
|
22
|
+
test('hides on escape', async ({ page }) => {
|
|
23
|
+
const trigger = page.locator('sds-text[aria-describedby="tooltip-default"]');
|
|
24
|
+
const tooltip = page.locator('#tooltip-default');
|
|
25
|
+
await trigger.hover();
|
|
26
|
+
await expect(tooltip).toBeVisible();
|
|
27
|
+
await page.keyboard.press('Escape');
|
|
28
|
+
await expect(tooltip).not.toBeVisible();
|
|
29
|
+
});
|
|
30
|
+
test('has role tooltip', async ({ page }) => {
|
|
31
|
+
const tooltip = page.locator('#tooltip-default');
|
|
32
|
+
await expect(tooltip).toHaveAttribute('role', 'tooltip');
|
|
33
|
+
});
|
|
34
|
+
});
|
|
35
|
+
//# sourceMappingURL=sds-tooltip.spec.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-tooltip.spec.js","sourceRoot":"","sources":["../../src/sds-tooltip/sds-tooltip.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEhD,IAAI,CAAC,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACvC,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,IAAI,CAAC,IAAI,CAAC,4DAA4D,CAAC,CAAC;IAC/E,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QACjD,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACzC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,8CAA8C,CAAC,CAAC;QAC7E,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAEjD,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;QACtB,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACzC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,8CAA8C,CAAC,CAAC;QAC7E,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAEjD,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;QACtB,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,8CAA8C,CAAC,CAAC;QAC7E,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAEjD,MAAM,OAAO,CAAC,KAAK,EAAE,CAAC;QACtB,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;QAEpC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACpC,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;IACzC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC3C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QACjD,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { test, expect } from '@playwright/test';\n\ntest.describe('tooltip-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto('iframe.html?viewMode=story&id=komponenter-tooltip--default');\n\t});\n\n\ttest('is hidden by default', async ({ page }) => {\n\t\tconst tooltip = page.locator('#tooltip-default');\n\t\tawait expect(tooltip).not.toBeVisible();\n\t});\n\n\ttest('shows on hover', async ({ page }) => {\n\t\tconst trigger = page.locator('sds-text[aria-describedby=\"tooltip-default\"]');\n\t\tconst tooltip = page.locator('#tooltip-default');\n\n\t\tawait trigger.hover();\n\t\tawait expect(tooltip).toBeVisible();\n\t});\n\n\ttest('shows on focus', async ({ page }) => {\n\t\tconst trigger = page.locator('sds-text[aria-describedby=\"tooltip-default\"]');\n\t\tconst tooltip = page.locator('#tooltip-default');\n\n\t\tawait trigger.focus();\n\t\tawait expect(tooltip).toBeVisible();\n\t});\n\n\ttest('hides on escape', async ({ page }) => {\n\t\tconst trigger = page.locator('sds-text[aria-describedby=\"tooltip-default\"]');\n\t\tconst tooltip = page.locator('#tooltip-default');\n\n\t\tawait trigger.hover();\n\t\tawait expect(tooltip).toBeVisible();\n\n\t\tawait page.keyboard.press('Escape');\n\t\tawait expect(tooltip).not.toBeVisible();\n\t});\n\n\ttest('has role tooltip', async ({ page }) => {\n\t\tconst tooltip = page.locator('#tooltip-default');\n\t\tawait expect(tooltip).toHaveAttribute('role', 'tooltip');\n\t});\n});\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-tooltip.styles.d.ts","sourceRoot":"","sources":["../../src/sds-tooltip/sds-tooltip.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,yBAmFlB,CAAC"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { css, unsafeCSS } from 'lit';
|
|
2
|
+
import stylesheet from './assets/tooltip-styles';
|
|
3
|
+
export const styles = css `
|
|
4
|
+
${unsafeCSS(stylesheet)}
|
|
5
|
+
|
|
6
|
+
:host {
|
|
7
|
+
--dsc-tooltip-background: var(--sds-tooltip-background, var(--sds-color-neutral-text-default));
|
|
8
|
+
--dsc-tooltip-color: var(--sds-tooltip-text-color, var(--sds-color-neutral-background-default));
|
|
9
|
+
--dsc-tooltip-border-radius: var(--sds-tooltip-border-radius, var(--sds-radius-sm));
|
|
10
|
+
--dsc-tooltip-padding: var(--sds-tooltip-padding, var(--sds-spacing-4xs) var(--sds-spacing-3xs));
|
|
11
|
+
--dsc-tooltip-arrow-size: var(--sds-tooltip-arrow-size, 8px);
|
|
12
|
+
|
|
13
|
+
--_sds-tooltip-max-width: var(--sds-tooltip-max-width, 30ch);
|
|
14
|
+
--_sds-tooltip-font-size: var(--sds-tooltip-font-size, var(--sds-components-font-size-content-sm, 0.875rem));
|
|
15
|
+
--_sds-tooltip-line-height: var(--sds-tooltip-line-height, var(--sds-components-line-height-squeezed-sm, 1.125rem));
|
|
16
|
+
|
|
17
|
+
slot {
|
|
18
|
+
max-width: var(--_sds-tooltip-max-width);
|
|
19
|
+
font-size: var(--_sds-tooltip-font-size);
|
|
20
|
+
line-height: var(--_sds-tooltip-line-height);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Note: Designsystem's tooltip.css uses nested CSS selectors that do not work in the shadow DOM.
|
|
25
|
+
These rules ensure that arrow positioning works for our tooltip.
|
|
26
|
+
Do not remove unless the CSS selectors from Designsystem work out of the box. */
|
|
27
|
+
:host([data-floating|='top'])::before {
|
|
28
|
+
rotate: 45deg;
|
|
29
|
+
top: 100%;
|
|
30
|
+
}
|
|
31
|
+
:host([data-floating|='right'])::before {
|
|
32
|
+
left: 0;
|
|
33
|
+
rotate: 135deg;
|
|
34
|
+
}
|
|
35
|
+
:host([data-floating|='bottom'])::before {
|
|
36
|
+
rotate: -135deg;
|
|
37
|
+
top: 0;
|
|
38
|
+
}
|
|
39
|
+
:host([data-floating|='left'])::before {
|
|
40
|
+
left: 100%;
|
|
41
|
+
rotate: -45deg;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
:host([data-floating='top'])::after,
|
|
45
|
+
:host([data-floating='bottom'])::after {
|
|
46
|
+
height: var(--dsc-tooltip-arrow-size);
|
|
47
|
+
left: 0;
|
|
48
|
+
width: 100%;
|
|
49
|
+
}
|
|
50
|
+
:host([data-floating='top'])::after {
|
|
51
|
+
top: 100%;
|
|
52
|
+
}
|
|
53
|
+
:host([data-floating='bottom'])::after {
|
|
54
|
+
top: calc(var(--dsc-tooltip-arrow-size) * -1);
|
|
55
|
+
}
|
|
56
|
+
:host([data-floating='left'])::after,
|
|
57
|
+
:host([data-floating='right'])::after {
|
|
58
|
+
height: 100%;
|
|
59
|
+
top: 0;
|
|
60
|
+
width: var(--dsc-tooltip-arrow-size);
|
|
61
|
+
}
|
|
62
|
+
:host([data-floating='right'])::after {
|
|
63
|
+
left: calc(var(--dsc-tooltip-arrow-size) * -1);
|
|
64
|
+
}
|
|
65
|
+
:host([data-floating='left'])::after {
|
|
66
|
+
left: 100%;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@keyframes ds-fade-in {
|
|
70
|
+
from {
|
|
71
|
+
opacity: 0;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@media (prefers-reduced-motion: reduce) {
|
|
76
|
+
:host {
|
|
77
|
+
animation: none;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@media (forced-colors: active) {
|
|
82
|
+
:host {
|
|
83
|
+
border: 1px solid CanvasText;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
`;
|
|
87
|
+
//# sourceMappingURL=sds-tooltip.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-tooltip.styles.js","sourceRoot":"","sources":["../../src/sds-tooltip/sds-tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AAEjD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;GACtB,SAAS,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFvB,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport stylesheet from './assets/tooltip-styles';\n\nexport const styles = css`\n\t${unsafeCSS(stylesheet)}\n\n\t:host {\n\t\t--dsc-tooltip-background: var(--sds-tooltip-background, var(--sds-color-neutral-text-default));\n\t\t--dsc-tooltip-color: var(--sds-tooltip-text-color, var(--sds-color-neutral-background-default));\n\t\t--dsc-tooltip-border-radius: var(--sds-tooltip-border-radius, var(--sds-radius-sm));\n\t\t--dsc-tooltip-padding: var(--sds-tooltip-padding, var(--sds-spacing-4xs) var(--sds-spacing-3xs));\n\t\t--dsc-tooltip-arrow-size: var(--sds-tooltip-arrow-size, 8px);\n\n\t\t--_sds-tooltip-max-width: var(--sds-tooltip-max-width, 30ch);\n\t\t--_sds-tooltip-font-size: var(--sds-tooltip-font-size, var(--sds-components-font-size-content-sm, 0.875rem));\n\t\t--_sds-tooltip-line-height: var(--sds-tooltip-line-height, var(--sds-components-line-height-squeezed-sm, 1.125rem));\n\n\t\tslot {\n\t\t\tmax-width: var(--_sds-tooltip-max-width);\n\t\t\tfont-size: var(--_sds-tooltip-font-size);\n\t\t\tline-height: var(--_sds-tooltip-line-height);\n\t\t}\n\t}\n\n\t/* Note: Designsystem's tooltip.css uses nested CSS selectors that do not work in the shadow DOM.\n\t These rules ensure that arrow positioning works for our tooltip.\n\t Do not remove unless the CSS selectors from Designsystem work out of the box. */\n\t:host([data-floating|='top'])::before {\n\t\trotate: 45deg;\n\t\ttop: 100%;\n\t}\n\t:host([data-floating|='right'])::before {\n\t\tleft: 0;\n\t\trotate: 135deg;\n\t}\n\t:host([data-floating|='bottom'])::before {\n\t\trotate: -135deg;\n\t\ttop: 0;\n\t}\n\t:host([data-floating|='left'])::before {\n\t\tleft: 100%;\n\t\trotate: -45deg;\n\t}\n\n\t:host([data-floating='top'])::after,\n\t:host([data-floating='bottom'])::after {\n\t\theight: var(--dsc-tooltip-arrow-size);\n\t\tleft: 0;\n\t\twidth: 100%;\n\t}\n\t:host([data-floating='top'])::after {\n\t\ttop: 100%;\n\t}\n\t:host([data-floating='bottom'])::after {\n\t\ttop: calc(var(--dsc-tooltip-arrow-size) * -1);\n\t}\n\t:host([data-floating='left'])::after,\n\t:host([data-floating='right'])::after {\n\t\theight: 100%;\n\t\ttop: 0;\n\t\twidth: var(--dsc-tooltip-arrow-size);\n\t}\n\t:host([data-floating='right'])::after {\n\t\tleft: calc(var(--dsc-tooltip-arrow-size) * -1);\n\t}\n\t:host([data-floating='left'])::after {\n\t\tleft: 100%;\n\t}\n\n\t@keyframes ds-fade-in {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t:host {\n\t\t\tanimation: none;\n\t\t}\n\t}\n\n\t@media (forced-colors: active) {\n\t\t:host {\n\t\t\tborder: 1px solid CanvasText;\n\t\t}\n\t}\n`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"positioning.d.ts","sourceRoot":"","sources":["../../src/shared/positioning.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"positioning.js","sourceRoot":"","sources":["../../src/shared/positioning.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC","sourcesContent":["import './assets/positioning.js';\n"]}
|