amount-dropdown small fixes (#2561)
* chore(amountDropdown): export types. * chore(amountDropdown): remove opinionated styling. * chore(amountDropdown): changeset. * chore(amountDropdown): props.styling optional * chore(amountDropdown): fix tests.
This commit is contained in:
parent
1437fddf22
commit
f6860c4bb7
6 changed files with 20 additions and 9 deletions
5
.changeset/strange-islands-judge.md
Normal file
5
.changeset/strange-islands-judge.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'@lion/ui': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
exports amount-dropdown types
|
||||||
|
|
@ -101,9 +101,6 @@ export class LionInputAmountDropdown extends LionInputAmount {
|
||||||
const refs = {
|
const refs = {
|
||||||
dropdown: {
|
dropdown: {
|
||||||
ref: this.refs.dropdown,
|
ref: this.refs.dropdown,
|
||||||
props: {
|
|
||||||
style: `height: 100%;`,
|
|
||||||
},
|
|
||||||
listeners: {
|
listeners: {
|
||||||
change: this._onDropdownValueChange,
|
change: this._onDropdownValueChange,
|
||||||
'model-value-changed': this._onDropdownValueChange,
|
'model-value-changed': this._onDropdownValueChange,
|
||||||
|
|
@ -159,7 +156,7 @@ export class LionInputAmountDropdown extends LionInputAmount {
|
||||||
${ref(refs?.dropdown?.ref)}
|
${ref(refs?.dropdown?.ref)}
|
||||||
aria-label="${refs?.dropdown?.labels?.selectCurrency}"
|
aria-label="${refs?.dropdown?.labels?.selectCurrency}"
|
||||||
@change="${refs?.dropdown?.listeners?.change}"
|
@change="${refs?.dropdown?.listeners?.change}"
|
||||||
style="${refs?.dropdown?.props?.style}"
|
style="${ifDefined(refs?.dropdown?.props?.style)}"
|
||||||
>
|
>
|
||||||
${data?.regionMetaListPreferred?.length
|
${data?.regionMetaListPreferred?.length
|
||||||
? html`
|
? html`
|
||||||
|
|
|
||||||
|
|
@ -150,7 +150,6 @@ export function runInputAmountDropdownSuite({ klass } = { klass: LionInputAmount
|
||||||
// @ts-expect-error [allow-protected]
|
// @ts-expect-error [allow-protected]
|
||||||
'model-value-changed': el._onDropdownValueChange,
|
'model-value-changed': el._onDropdownValueChange,
|
||||||
},
|
},
|
||||||
props: { style: 'height: 100%;' },
|
|
||||||
ref: {
|
ref: {
|
||||||
value: dropdownNode,
|
value: dropdownNode,
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@ import { LionOption } from '@lion/ui/listbox.js';
|
||||||
import { ref } from 'lit/directives/ref.js';
|
import { ref } from 'lit/directives/ref.js';
|
||||||
import { html } from 'lit';
|
import { html } from 'lit';
|
||||||
|
|
||||||
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||||
import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
|
import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
|
||||||
import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
|
import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
|
||||||
import '@lion/ui/define/lion-input-amount-dropdown.js';
|
import '@lion/ui/define/lion-input-amount-dropdown.js';
|
||||||
|
|
@ -43,7 +44,7 @@ class WithFormControlInputAmountDropdown extends ScopedElementsMixin(LionInputAm
|
||||||
label="${refs?.dropdown?.labels?.country}"
|
label="${refs?.dropdown?.labels?.country}"
|
||||||
label-sr-only
|
label-sr-only
|
||||||
@model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
|
@model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
|
||||||
style="${refs?.dropdown?.props?.style}"
|
style="${ifDefined(refs?.dropdown?.props?.style)}"
|
||||||
>
|
>
|
||||||
${repeat(
|
${repeat(
|
||||||
data.regionMetaList,
|
data.regionMetaList,
|
||||||
|
|
@ -81,7 +82,7 @@ describe('WithFormControlInputAmountDropdown', () => {
|
||||||
label="${refs?.dropdown?.labels?.country}"
|
label="${refs?.dropdown?.labels?.country}"
|
||||||
label-sr-only
|
label-sr-only
|
||||||
@model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
|
@model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
|
||||||
style="${refs?.dropdown?.props?.style}"
|
style="${ifDefined(refs?.dropdown?.props?.style)}"
|
||||||
interaction-mode="mac"
|
interaction-mode="mac"
|
||||||
>
|
>
|
||||||
${repeat(
|
${repeat(
|
||||||
|
|
@ -134,7 +135,7 @@ describe('WithFormControlInputAmountDropdown', () => {
|
||||||
label="${refs?.dropdown?.labels?.country}"
|
label="${refs?.dropdown?.labels?.country}"
|
||||||
label-sr-only
|
label-sr-only
|
||||||
@model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
|
@model-value-changed="${refs?.dropdown?.listeners['model-value-changed']}"
|
||||||
style="${refs?.dropdown?.props?.style}"
|
style="${ifDefined(refs?.dropdown?.props?.style)}"
|
||||||
interaction-mode="windows/linux"
|
interaction-mode="windows/linux"
|
||||||
>
|
>
|
||||||
${repeat(
|
${repeat(
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@ export type TemplateDataForDropdownInputAmount = {
|
||||||
refs: {
|
refs: {
|
||||||
dropdown: RefTemplateData & {
|
dropdown: RefTemplateData & {
|
||||||
ref: DropdownRef;
|
ref: DropdownRef;
|
||||||
props: { style: string };
|
props?: { style?: string };
|
||||||
listeners: {
|
listeners: {
|
||||||
change: (event: OnDropdownChangeEvent) => void;
|
change: (event: OnDropdownChangeEvent) => void;
|
||||||
'model-value-changed': (event: OnDropdownChangeEvent) => void;
|
'model-value-changed': (event: OnDropdownChangeEvent) => void;
|
||||||
|
|
|
||||||
9
packages/ui/exports/types/input-amount-dropdown.ts
Normal file
9
packages/ui/exports/types/input-amount-dropdown.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
export {
|
||||||
|
RegionMeta,
|
||||||
|
TemplateDataForDropdownInputAmount,
|
||||||
|
AmountDropdownModelValue,
|
||||||
|
CurrencyCode,
|
||||||
|
countryToCurrencyList,
|
||||||
|
RegionToCurrencyMap,
|
||||||
|
AllCurrenciesSet
|
||||||
|
} from '../../components/input-amount-dropdown/types/index.js';
|
||||||
Loading…
Reference in a new issue