@ds-mo/ui 8.0.0 → 8.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.build-stamp +1 -1
- package/dist/agent.json +633 -29
- package/dist/angular/ds-badge.d.ts +1 -1
- package/dist/angular/ds-badge.js +3 -3
- package/dist/angular/ds-button-filled.d.ts +1 -1
- package/dist/angular/ds-button-filled.js +3 -3
- package/dist/angular/ds-button-unfilled.d.ts +1 -1
- package/dist/angular/ds-button-unfilled.js +3 -3
- package/dist/angular/ds-checkbox.d.ts +4 -1
- package/dist/angular/ds-checkbox.js +3 -3
- package/dist/angular/ds-empty-state.d.ts +1 -1
- package/dist/angular/ds-empty-state.js +3 -3
- package/dist/angular/ds-select-multi.d.ts +28 -0
- package/dist/angular/ds-select-multi.js +49 -0
- package/dist/angular/ds-select.d.ts +12 -2
- package/dist/angular/ds-select.js +11 -4
- package/dist/angular/index.d.ts +1 -1
- package/dist/angular/index.js +1 -0
- package/dist/angular/proxies.d.ts +1 -0
- package/dist/angular/proxies.js +1 -0
- package/dist/components/ds-app-shell.js +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-nav.js.map +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card.js +1 -1
- package/dist/components/ds-chart-bar.js +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-chart-line.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-checkbox.js.map +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-empty-state.js.map +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-icon.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-panel-sub-nav.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-radio-group.js +1 -1
- package/dist/components/ds-select-multi.d.ts +11 -0
- package/dist/components/ds-select-multi.js +2 -0
- package/dist/components/ds-select-multi.js.map +1 -0
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-shell-gradient-picker.js +1 -1
- package/dist/components/ds-shell-gradient-swatch.js +1 -1
- package/dist/components/ds-skeleton.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tab-group.js.map +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/{p-CPD_mML6.js → p-B2FhhQba.js} +2 -2
- package/dist/components/p-BEmVLLnN.js +2 -0
- package/dist/components/p-BEmVLLnN.js.map +1 -0
- package/dist/components/{p-DoZU8RH0.js → p-BMbadvZo.js} +2 -2
- package/dist/components/{p-B8ERbwc9.js → p-BcB-zkOx.js} +2 -2
- package/dist/components/p-COzps7J4.js +2 -0
- package/dist/components/p-COzps7J4.js.map +1 -0
- package/dist/components/p-CTmsQjsE.js +2 -0
- package/dist/components/p-CTmsQjsE.js.map +1 -0
- package/dist/components/p-C_cu-HIT.js +2 -0
- package/dist/components/p-C_cu-HIT.js.map +1 -0
- package/dist/components/{p-DavEAOUa.js → p-Ckiwpsgw.js} +2 -2
- package/dist/components/{p-Dt0XnMxc.js → p-CwaC4wLu.js} +2 -2
- package/dist/components/{p-Dt0XnMxc.js.map → p-CwaC4wLu.js.map} +1 -1
- package/dist/components/{p-clDpFcdU.js → p-DDBLO7bY.js} +2 -2
- package/dist/components/p-Du9UUSJ5.js +2 -0
- package/dist/components/p-Du9UUSJ5.js.map +1 -0
- package/dist/components/p-JsVSx7ZR.js +2 -0
- package/dist/components/p-JsVSx7ZR.js.map +1 -0
- package/dist/components/{p-3bRWSqaN.js → p-WdtWRvVr.js} +2 -2
- package/dist/components/{p-Mx6VFEQc.js → p-_zP4v-Al.js} +2 -2
- package/dist/components/p-_zP4v-Al.js.map +1 -0
- package/dist/components/{p-DsiueSMI.js → p-auwU64d8.js} +2 -2
- package/dist/components/p-f0a1l4Uc.js +2 -0
- package/dist/components/p-f0a1l4Uc.js.map +1 -0
- package/dist/docs/components.json +1974 -237
- package/dist/framework/angular.d.ts +1 -0
- package/dist/framework/angular.js +1 -0
- package/dist/framework/select-multi-value-accessor.d.ts +9 -0
- package/dist/framework/select-multi-value-accessor.js +40 -0
- package/dist/lib/components/Menu/menu-position.d.ts +6 -19
- package/dist/lib/utils/anchored-popup.d.ts +19 -0
- package/dist/react/components.d.ts +1 -0
- package/dist/react/components.js +1 -0
- package/dist/react/ds-select-multi.d.ts +14 -0
- package/dist/react/ds-select-multi.js +16 -0
- package/dist/react/ds-select.d.ts +2 -0
- package/dist/react/ds-select.js +5 -1
- package/dist/types/components/Badge/Badge.d.ts +2 -0
- package/dist/types/components/ButtonFilled/ButtonFilled.d.ts +2 -0
- package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts +2 -0
- package/dist/types/components/Checkbox/Checkbox.d.ts +16 -0
- package/dist/types/components/Checkbox/index.d.ts +1 -1
- package/dist/types/components/EmptyState/EmptyState.d.ts +6 -5
- package/dist/types/components/Menu/menu-position.d.ts +6 -19
- package/dist/types/components/Select/Select.d.ts +94 -48
- package/dist/types/components/Select/index.d.ts +1 -1
- package/dist/types/components/SelectMulti/SelectMulti.d.ts +131 -0
- package/dist/types/components/SelectMulti/index.d.ts +2 -0
- package/dist/types/components/Text/Text.d.ts +1 -0
- package/dist/types/components.d.ts +683 -55
- package/dist/types/utils/anchored-popup.d.ts +20 -0
- package/dist/types/utils/choice-list-parts.d.ts +33 -0
- package/dist/types/utils/choice-list.d.ts +26 -0
- package/package.json +8 -5
- package/dist/components/p-Ca1H1HPf.js +0 -2
- package/dist/components/p-Ca1H1HPf.js.map +0 -1
- package/dist/components/p-CpX87AQy.js +0 -2
- package/dist/components/p-CpX87AQy.js.map +0 -1
- package/dist/components/p-CyMmsNCF.js +0 -2
- package/dist/components/p-CyMmsNCF.js.map +0 -1
- package/dist/components/p-Mx6VFEQc.js.map +0 -1
- /package/dist/components/{p-CPD_mML6.js.map → p-B2FhhQba.js.map} +0 -0
- /package/dist/components/{p-DoZU8RH0.js.map → p-BMbadvZo.js.map} +0 -0
- /package/dist/components/{p-B8ERbwc9.js.map → p-BcB-zkOx.js.map} +0 -0
- /package/dist/components/{p-DavEAOUa.js.map → p-Ckiwpsgw.js.map} +0 -0
- /package/dist/components/{p-clDpFcdU.js.map → p-DDBLO7bY.js.map} +0 -0
- /package/dist/components/{p-3bRWSqaN.js.map → p-WdtWRvVr.js.map} +0 -0
- /package/dist/components/{p-DsiueSMI.js.map → p-auwU64d8.js.map} +0 -0
|
@@ -3,4 +3,5 @@ export * from '../angular/proxies.js';
|
|
|
3
3
|
export { BooleanValueAccessor } from '../angular/boolean-value-accessor.js';
|
|
4
4
|
export { RadioValueAccessor } from '../angular/radio-value-accessor.js';
|
|
5
5
|
export { SelectValueAccessor } from '../angular/select-value-accessor.js';
|
|
6
|
+
export { SelectMultiValueAccessor } from './select-multi-value-accessor.js';
|
|
6
7
|
export { TextValueAccessor } from '../angular/text-value-accessor.js';
|
|
@@ -3,4 +3,5 @@ export * from '../angular/proxies.js';
|
|
|
3
3
|
export { BooleanValueAccessor } from '../angular/boolean-value-accessor.js';
|
|
4
4
|
export { RadioValueAccessor } from '../angular/radio-value-accessor.js';
|
|
5
5
|
export { SelectValueAccessor } from '../angular/select-value-accessor.js';
|
|
6
|
+
export { SelectMultiValueAccessor } from './select-multi-value-accessor.js';
|
|
6
7
|
export { TextValueAccessor } from '../angular/text-value-accessor.js';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ElementRef } from '@angular/core';
|
|
2
|
+
import { ValueAccessor } from '../angular/value-accessor';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export declare class SelectMultiValueAccessor extends ValueAccessor {
|
|
5
|
+
constructor(el: ElementRef<HTMLDsSelectMultiElement>);
|
|
6
|
+
writeValue(value: unknown): void;
|
|
7
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SelectMultiValueAccessor, never>;
|
|
8
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<SelectMultiValueAccessor, "ds-select-multi", never, {}, {}, never, never, true, never>;
|
|
9
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { Directive, forwardRef } from '@angular/core';
|
|
2
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
3
|
+
import { ValueAccessor } from '../angular/value-accessor.js';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export class SelectMultiValueAccessor extends ValueAccessor {
|
|
6
|
+
constructor(el) {
|
|
7
|
+
super(el);
|
|
8
|
+
}
|
|
9
|
+
writeValue(value) {
|
|
10
|
+
const values = Array.isArray(value)
|
|
11
|
+
? value.filter((item) => typeof item === 'string')
|
|
12
|
+
: [];
|
|
13
|
+
this.el.nativeElement.values = values;
|
|
14
|
+
this.lastValue = values;
|
|
15
|
+
}
|
|
16
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectMultiValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
17
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: SelectMultiValueAccessor, isStandalone: true, selector: "ds-select-multi", host: { listeners: { "dsChange": "handleChangeEvent($event.target?.[\"values\"])" } }, providers: [
|
|
18
|
+
{
|
|
19
|
+
provide: NG_VALUE_ACCESSOR,
|
|
20
|
+
useExisting: forwardRef(() => SelectMultiValueAccessor),
|
|
21
|
+
multi: true,
|
|
22
|
+
},
|
|
23
|
+
], usesInheritance: true, ngImport: i0 }); }
|
|
24
|
+
}
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SelectMultiValueAccessor, decorators: [{
|
|
26
|
+
type: Directive,
|
|
27
|
+
args: [{
|
|
28
|
+
selector: 'ds-select-multi',
|
|
29
|
+
host: {
|
|
30
|
+
'(dsChange)': 'handleChangeEvent($event.target?.["values"])',
|
|
31
|
+
},
|
|
32
|
+
providers: [
|
|
33
|
+
{
|
|
34
|
+
provide: NG_VALUE_ACCESSOR,
|
|
35
|
+
useExisting: forwardRef(() => SelectMultiValueAccessor),
|
|
36
|
+
multi: true,
|
|
37
|
+
},
|
|
38
|
+
],
|
|
39
|
+
}]
|
|
40
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }] });
|
|
@@ -1,19 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
export type
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
side: MenuSide;
|
|
8
|
-
align: MenuAlign;
|
|
9
|
-
sideOffsetPx: number;
|
|
10
|
-
alignOffsetPx: number;
|
|
11
|
-
viewportPadPx: number;
|
|
12
|
-
viewportWidth: number;
|
|
13
|
-
viewportHeight: number;
|
|
14
|
-
}
|
|
15
|
-
/** Pure layout math for ds-menu — anchor rect + placement props → viewport-fixed x/y. */
|
|
16
|
-
export declare function computeMenuPosition(input: MenuPositionInput): {
|
|
17
|
-
x: number;
|
|
18
|
-
y: number;
|
|
19
|
-
};
|
|
1
|
+
import { computeAnchoredPopupPosition, type AnchoredPopupAlign, type AnchoredPopupPositionInput, type AnchoredPopupSide } from '../../utils/anchored-popup';
|
|
2
|
+
export type MenuSide = AnchoredPopupSide;
|
|
3
|
+
export type MenuAlign = AnchoredPopupAlign;
|
|
4
|
+
export type MenuPositionInput = AnchoredPopupPositionInput;
|
|
5
|
+
/** Backward-compatible menu alias for the shared anchored-popup layout math. */
|
|
6
|
+
export declare const computeMenuPosition: typeof computeAnchoredPopupPosition;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export type AnchoredPopupSide = 'top' | 'right' | 'bottom' | 'left';
|
|
2
|
+
export type AnchoredPopupAlign = 'start' | 'center' | 'end';
|
|
3
|
+
export interface AnchoredPopupPositionInput {
|
|
4
|
+
anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;
|
|
5
|
+
popupWidth: number;
|
|
6
|
+
popupHeight: number;
|
|
7
|
+
side: AnchoredPopupSide;
|
|
8
|
+
align: AnchoredPopupAlign;
|
|
9
|
+
sideOffsetPx: number;
|
|
10
|
+
alignOffsetPx: number;
|
|
11
|
+
viewportPadPx: number;
|
|
12
|
+
viewportWidth: number;
|
|
13
|
+
viewportHeight: number;
|
|
14
|
+
}
|
|
15
|
+
/** Pure viewport-fixed anchored-popup layout math shared by menus and selects. */
|
|
16
|
+
export declare function computeAnchoredPopupPosition(input: AnchoredPopupPositionInput): {
|
|
17
|
+
x: number;
|
|
18
|
+
y: number;
|
|
19
|
+
};
|
|
@@ -30,6 +30,7 @@ export { DsPanelNav } from "./ds-panel-nav.js";
|
|
|
30
30
|
export { DsPanelSubNav } from "./ds-panel-sub-nav.js";
|
|
31
31
|
export { DsPanelTools } from "./ds-panel-tools.js";
|
|
32
32
|
export { DsRadioGroup } from "./ds-radio-group.js";
|
|
33
|
+
export { DsSelectMulti } from "./ds-select-multi.js";
|
|
33
34
|
export { DsSelect } from "./ds-select.js";
|
|
34
35
|
export { DsShellGradientPicker } from "./ds-shell-gradient-picker.js";
|
|
35
36
|
export { DsShellGradientSwatch } from "./ds-shell-gradient-swatch.js";
|
package/dist/react/components.js
CHANGED
|
@@ -31,6 +31,7 @@ export { DsPanelNav } from "./ds-panel-nav.js";
|
|
|
31
31
|
export { DsPanelSubNav } from "./ds-panel-sub-nav.js";
|
|
32
32
|
export { DsPanelTools } from "./ds-panel-tools.js";
|
|
33
33
|
export { DsRadioGroup } from "./ds-radio-group.js";
|
|
34
|
+
export { DsSelectMulti } from "./ds-select-multi.js";
|
|
34
35
|
export { DsSelect } from "./ds-select.js";
|
|
35
36
|
export { DsShellGradientPicker } from "./ds-shell-gradient-picker.js";
|
|
36
37
|
export { DsShellGradientSwatch } from "./ds-shell-gradient-swatch.js";
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This file was automatically generated by the Stencil React Output Target.
|
|
3
|
+
* Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
|
|
4
|
+
*/
|
|
5
|
+
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
|
|
6
|
+
import { type DsSelectMultiCustomEvent } from "@ds-mo/ui";
|
|
7
|
+
import type { Components } from "@ds-mo/ui/dist/components";
|
|
8
|
+
import { DsSelectMulti as DsSelectMultiElement } from "@ds-mo/ui/dist/components/ds-select-multi.js";
|
|
9
|
+
export type DsSelectMultiEvents = {
|
|
10
|
+
onDsChange: EventName<DsSelectMultiCustomEvent<string[]>>;
|
|
11
|
+
onDsClear: EventName<DsSelectMultiCustomEvent<void>>;
|
|
12
|
+
onDsOpenChange: EventName<DsSelectMultiCustomEvent<boolean>>;
|
|
13
|
+
};
|
|
14
|
+
export declare const DsSelectMulti: StencilReactComponent<DsSelectMultiElement, DsSelectMultiEvents, Components.DsSelectMulti>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { createComponent } from '@stencil/react-output-target/runtime';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { DsSelectMulti as DsSelectMultiElement, defineCustomElement as defineDsSelectMulti } from "@ds-mo/ui/dist/components/ds-select-multi.js";
|
|
5
|
+
export const DsSelectMulti = /*@__PURE__*/ createComponent({
|
|
6
|
+
tagName: 'ds-select-multi',
|
|
7
|
+
elementClass: DsSelectMultiElement,
|
|
8
|
+
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
9
|
+
react: React,
|
|
10
|
+
events: {
|
|
11
|
+
onDsChange: 'dsChange',
|
|
12
|
+
onDsClear: 'dsClear',
|
|
13
|
+
onDsOpenChange: 'dsOpenChange'
|
|
14
|
+
},
|
|
15
|
+
defineCustomElement: defineDsSelectMulti
|
|
16
|
+
});
|
|
@@ -8,5 +8,7 @@ import type { Components } from "@ds-mo/ui/dist/components";
|
|
|
8
8
|
import { DsSelect as DsSelectElement } from "@ds-mo/ui/dist/components/ds-select.js";
|
|
9
9
|
export type DsSelectEvents = {
|
|
10
10
|
onDsChange: EventName<DsSelectCustomEvent<string>>;
|
|
11
|
+
onDsClear: EventName<DsSelectCustomEvent<void>>;
|
|
12
|
+
onDsOpenChange: EventName<DsSelectCustomEvent<boolean>>;
|
|
11
13
|
};
|
|
12
14
|
export declare const DsSelect: StencilReactComponent<DsSelectElement, DsSelectEvents, Components.DsSelect>;
|
package/dist/react/ds-select.js
CHANGED
|
@@ -7,6 +7,10 @@ export const DsSelect = /*@__PURE__*/ createComponent({
|
|
|
7
7
|
elementClass: DsSelectElement,
|
|
8
8
|
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
9
9
|
react: React,
|
|
10
|
-
events: {
|
|
10
|
+
events: {
|
|
11
|
+
onDsChange: 'dsChange',
|
|
12
|
+
onDsClear: 'dsClear',
|
|
13
|
+
onDsOpenChange: 'dsOpenChange'
|
|
14
|
+
},
|
|
11
15
|
defineCustomElement: defineDsSelect
|
|
12
16
|
});
|
|
@@ -12,6 +12,8 @@ export declare class Badge {
|
|
|
12
12
|
surface: BadgeSurface;
|
|
13
13
|
/** Direct ring background override for component-local surfaces. */
|
|
14
14
|
background: string | undefined;
|
|
15
|
+
/** Show the separation ring when the badge overlaps an icon or other content. */
|
|
16
|
+
hasRing: boolean;
|
|
15
17
|
/**
|
|
16
18
|
* Ring samples the shell gradient stack (base fill + wash) instead of a flat
|
|
17
19
|
* `box-shadow`. Auto-enabled under an AppShell with an active gradient preset;
|
|
@@ -27,6 +27,8 @@ export declare class ButtonFilled {
|
|
|
27
27
|
* bold → faint, strong → medium, medium → strong, faint → bold.
|
|
28
28
|
*/
|
|
29
29
|
contrast: ButtonFilledContrast;
|
|
30
|
+
/** Use the half-radius treatment instead of the default control radius. */
|
|
31
|
+
rounded: boolean;
|
|
30
32
|
/** Disables interaction. */
|
|
31
33
|
isInactive: boolean;
|
|
32
34
|
/** Shows an inline loader and prevents interaction without applying inactive opacity. */
|
|
@@ -29,6 +29,8 @@ export declare class ButtonUnfilled {
|
|
|
29
29
|
activeFill: boolean;
|
|
30
30
|
/** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */
|
|
31
31
|
hasBorder: boolean;
|
|
32
|
+
/** Use the half-radius treatment instead of the default control radius. */
|
|
33
|
+
rounded: boolean;
|
|
32
34
|
/** Show a notification dot at the top-right of the icon zone (icon variant only). */
|
|
33
35
|
dot: boolean;
|
|
34
36
|
/** Disables interaction. */
|
|
@@ -1,18 +1,34 @@
|
|
|
1
1
|
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
+
export type CheckboxSize = 'md' | 'sm' | 'xs';
|
|
2
3
|
export declare class Checkbox {
|
|
3
4
|
internals: ElementInternals;
|
|
4
5
|
private labelId;
|
|
6
|
+
/** Visible label and accessible name. Omitted only in presentation mode. */
|
|
5
7
|
label: string;
|
|
8
|
+
/** Current checked state. */
|
|
6
9
|
checked: boolean;
|
|
10
|
+
/** Visual and placement density. */
|
|
11
|
+
size: CheckboxSize;
|
|
12
|
+
/** Native form field name. */
|
|
7
13
|
name: string | undefined;
|
|
14
|
+
/** Submitted value when checked. */
|
|
8
15
|
value: string;
|
|
16
|
+
/** Native disabled state. */
|
|
9
17
|
disabled: boolean;
|
|
18
|
+
/** Require the checkbox to be checked for form validity. */
|
|
10
19
|
required: boolean;
|
|
20
|
+
/** Validation message used when a required checkbox is unchecked. */
|
|
11
21
|
requiredMessage: string;
|
|
22
|
+
/** Mixed visual state. Activation clears it before toggling checked. */
|
|
12
23
|
indeterminate: boolean;
|
|
24
|
+
/** Design-system inactive state. */
|
|
13
25
|
isInactive: boolean;
|
|
26
|
+
/** Visual-only indicator for a composite control that owns selection semantics. */
|
|
27
|
+
presentation: boolean;
|
|
28
|
+
/** Emitted after user activation with the new checked state. */
|
|
14
29
|
dsChange: EventEmitter<boolean>;
|
|
15
30
|
private initialChecked;
|
|
31
|
+
private initialIndeterminate;
|
|
16
32
|
private formDisabled;
|
|
17
33
|
componentWillLoad(): void;
|
|
18
34
|
syncFormValue(): void;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export type {} from './Checkbox';
|
|
1
|
+
export type { CheckboxSize } from './Checkbox';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
export type EmptyStateType = 'no-content' | 'no-results' | 'no-results-filter' | 'no-access';
|
|
2
1
|
export declare class EmptyState {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
|
|
2
|
+
/** Optional decorative prefix glyph for the complete icon + title + body variant. */
|
|
3
|
+
icon: string | undefined;
|
|
4
|
+
/** Optional visual title. Use with body; required when icon is provided. */
|
|
5
|
+
heading: string | undefined;
|
|
6
|
+
/** Explanatory empty-state copy. Every supported variant includes body text. */
|
|
7
|
+
body: string;
|
|
7
8
|
render(): any;
|
|
8
9
|
}
|
|
9
10
|
//# sourceMappingURL=EmptyState.d.ts.map
|
|
@@ -1,20 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
export type
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
side: MenuSide;
|
|
8
|
-
align: MenuAlign;
|
|
9
|
-
sideOffsetPx: number;
|
|
10
|
-
alignOffsetPx: number;
|
|
11
|
-
viewportPadPx: number;
|
|
12
|
-
viewportWidth: number;
|
|
13
|
-
viewportHeight: number;
|
|
14
|
-
}
|
|
15
|
-
/** Pure layout math for ds-menu — anchor rect + placement props → viewport-fixed x/y. */
|
|
16
|
-
export declare function computeMenuPosition(input: MenuPositionInput): {
|
|
17
|
-
x: number;
|
|
18
|
-
y: number;
|
|
19
|
-
};
|
|
1
|
+
import { computeAnchoredPopupPosition, type AnchoredPopupAlign, type AnchoredPopupPositionInput, type AnchoredPopupSide } from '../../utils/anchored-popup';
|
|
2
|
+
export type MenuSide = AnchoredPopupSide;
|
|
3
|
+
export type MenuAlign = AnchoredPopupAlign;
|
|
4
|
+
export type MenuPositionInput = AnchoredPopupPositionInput;
|
|
5
|
+
/** Backward-compatible menu alias for the shared anchored-popup layout math. */
|
|
6
|
+
export declare const computeMenuPosition: typeof computeAnchoredPopupPosition;
|
|
20
7
|
//# sourceMappingURL=menu-position.d.ts.map
|
|
@@ -1,83 +1,129 @@
|
|
|
1
1
|
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
2
|
import { type ControlWidth } from '../../utils';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
import { type ChoiceBackground, type ChoiceOption, type ChoiceSection } from '../../utils/choice-list';
|
|
4
|
+
export type SelectOption = ChoiceOption;
|
|
5
|
+
export type SelectSection = ChoiceSection;
|
|
6
|
+
export type SelectBackground = ChoiceBackground;
|
|
7
7
|
export type SelectSize = 'md' | 'sm' | 'xs';
|
|
8
8
|
export type SelectWidth = ControlWidth;
|
|
9
|
-
/**
|
|
10
|
-
* Dropdown select — unfilled-button chrome (label + trailing ChevronDown) in
|
|
11
|
-
* control-density sizes, with `ds-menu` for the option list.
|
|
12
|
-
*/
|
|
13
9
|
export declare class Select {
|
|
14
10
|
el: HTMLElement;
|
|
15
11
|
internals: ElementInternals;
|
|
16
|
-
/**
|
|
17
|
-
* Array of options. Set via JS property.
|
|
18
|
-
* @example el.options = [{ label: 'Apple', value: 'apple' }];
|
|
19
|
-
*/
|
|
12
|
+
/** Flat choices. Assign arrays through the JavaScript property. */
|
|
20
13
|
options: SelectOption[];
|
|
21
|
-
/**
|
|
14
|
+
/** Grouped choices; takes precedence over options. Assign through JavaScript. */
|
|
15
|
+
sections: SelectSection[];
|
|
16
|
+
/** Selected string value. Unknown values render the placeholder and are not submitted. */
|
|
22
17
|
value: string;
|
|
18
|
+
/** Controlled popup visibility. */
|
|
19
|
+
open: boolean;
|
|
20
|
+
/** Native form field name. */
|
|
23
21
|
name: string | undefined;
|
|
22
|
+
/** Native disabled state. */
|
|
24
23
|
disabled: boolean;
|
|
24
|
+
/** Require one valid selected value. */
|
|
25
25
|
required: boolean;
|
|
26
|
+
/** Validation message used when required is missing. */
|
|
26
27
|
requiredMessage: string;
|
|
27
|
-
/**
|
|
28
|
+
/** Trigger text shown when no valid value is selected. */
|
|
28
29
|
placeholder: string;
|
|
29
|
-
/** Control density
|
|
30
|
+
/** Control density. */
|
|
30
31
|
size: SelectSize;
|
|
31
|
-
/** Width fit —
|
|
32
|
+
/** Width fit — hug content (default) or fill the parent. */
|
|
32
33
|
width: SelectWidth;
|
|
33
|
-
/**
|
|
34
|
+
/** Shared inactive treatment; removes interaction and form submission. */
|
|
34
35
|
isInactive: boolean;
|
|
35
|
-
/**
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
* foreground-only selection (primary label, no fill).
|
|
39
|
-
* A selected value promotes the label to primary; chevron stays secondary.
|
|
40
|
-
*/
|
|
36
|
+
/** Replace the prefix with a loader and disable option interaction. */
|
|
37
|
+
isLoading: boolean;
|
|
38
|
+
/** Show the selected interaction fill when a valid value exists. */
|
|
41
39
|
activeFill: boolean;
|
|
42
|
-
/** Show
|
|
40
|
+
/** Show the surface-aware inset border. */
|
|
43
41
|
hasBorder: boolean;
|
|
42
|
+
/** Optional trigger prefix icon name. */
|
|
43
|
+
icon: string | undefined;
|
|
44
|
+
/** Show the clear footer action when a value exists. */
|
|
45
|
+
allowClear: boolean;
|
|
46
|
+
/** Localized clear action label. */
|
|
47
|
+
clearLabel: string;
|
|
48
|
+
/** Show immediate local filtering over option labels, subtext, and section headings. */
|
|
49
|
+
searchable: boolean;
|
|
50
|
+
/** Localized search-field placeholder and accessible name. */
|
|
51
|
+
searchPlaceholder: string;
|
|
52
|
+
/** Localized empty-filter result text. */
|
|
53
|
+
noResultsText: string;
|
|
54
|
+
/** Accessible loading status label. */
|
|
55
|
+
loadingLabel: string;
|
|
56
|
+
/** Actual parent surface context; omit on primary and secondary surfaces. */
|
|
57
|
+
background: SelectBackground | undefined;
|
|
58
|
+
/** Show invalid visual state. */
|
|
59
|
+
error: boolean;
|
|
60
|
+
/** Error text rendered below the trigger when error is true. */
|
|
61
|
+
errorMessage: string | undefined;
|
|
62
|
+
/** ID applied to the internal combobox trigger for external labels. */
|
|
63
|
+
inputId: string | undefined;
|
|
64
|
+
/** Direct accessible name when no external label is available. */
|
|
44
65
|
ariaLabel: string | null;
|
|
66
|
+
/** IDs of elements that label the combobox. */
|
|
45
67
|
ariaLabelledby: string | undefined;
|
|
46
|
-
/**
|
|
68
|
+
/** Additional IDs that describe the combobox. */
|
|
69
|
+
ariaDescribedby: string | undefined;
|
|
70
|
+
/** Emitted after user selection or clearing with the next scalar value. */
|
|
47
71
|
dsChange: EventEmitter<string>;
|
|
48
|
-
|
|
72
|
+
/** Emitted after the footer clear action. */
|
|
73
|
+
dsClear: EventEmitter<void>;
|
|
74
|
+
/** Emitted whenever popup visibility changes. */
|
|
75
|
+
dsOpenChange: EventEmitter<boolean>;
|
|
76
|
+
private activeIndex;
|
|
77
|
+
private searchTerm;
|
|
78
|
+
private formDisabled;
|
|
79
|
+
private position;
|
|
80
|
+
private positionReady;
|
|
81
|
+
private focusRingVisible;
|
|
82
|
+
private readonly generatedId;
|
|
83
|
+
private readonly listboxId;
|
|
84
|
+
private readonly errorId;
|
|
49
85
|
private triggerEl;
|
|
50
|
-
private
|
|
51
|
-
|
|
52
|
-
private openWithFocusVisible;
|
|
86
|
+
private popupEl;
|
|
87
|
+
private searchEl;
|
|
53
88
|
private initialValue;
|
|
54
|
-
private
|
|
89
|
+
private typeahead;
|
|
90
|
+
private typeaheadTimer;
|
|
91
|
+
private outsideHandler;
|
|
92
|
+
private repositionHandler;
|
|
55
93
|
componentWillLoad(): void;
|
|
56
94
|
componentDidLoad(): void;
|
|
57
95
|
disconnectedCallback(): void;
|
|
58
|
-
onIsOpenChange(open: boolean): void;
|
|
59
|
-
onOptionsChange(): void;
|
|
60
|
-
onValueChange(): void;
|
|
61
96
|
syncFormValue(): void;
|
|
97
|
+
onLoadingChange(): void;
|
|
98
|
+
onOpenChange(open: boolean): void;
|
|
99
|
+
onSearchTermChange(): void;
|
|
100
|
+
onActiveIndexChange(): void;
|
|
62
101
|
formDisabledCallback(disabled: boolean): void;
|
|
63
102
|
formResetCallback(): void;
|
|
64
103
|
formStateRestoreCallback(state: string | File | FormData | null): void;
|
|
65
|
-
|
|
66
|
-
private
|
|
67
|
-
private
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
* the field (left-bottom / `align="start"`) when labels need more room.
|
|
73
|
-
*/
|
|
74
|
-
private syncMenuLayout;
|
|
75
|
-
private open;
|
|
76
|
-
private close;
|
|
77
|
-
private toggle;
|
|
78
|
-
handleKeyDown(e: KeyboardEvent): void;
|
|
79
|
-
private get selectedLabel();
|
|
104
|
+
setFocus(): Promise<void>;
|
|
105
|
+
private get isDisabled();
|
|
106
|
+
private get allSections();
|
|
107
|
+
private get allOptions();
|
|
108
|
+
private get visibleSections();
|
|
109
|
+
private get visibleOptions();
|
|
110
|
+
private get selectedOption();
|
|
80
111
|
private get hasSelection();
|
|
112
|
+
private get activeOptionId();
|
|
113
|
+
private scrollActiveOptionIntoView;
|
|
114
|
+
private bindPopupListeners;
|
|
115
|
+
private unbindPopupListeners;
|
|
116
|
+
private updatePosition;
|
|
117
|
+
private openPopup;
|
|
118
|
+
private closePopup;
|
|
119
|
+
private selectOption;
|
|
120
|
+
private clearSelection;
|
|
121
|
+
private moveActive;
|
|
122
|
+
private setActiveEdge;
|
|
123
|
+
private handleTypeahead;
|
|
124
|
+
private handleListKeyDown;
|
|
125
|
+
private handleTriggerKeyDown;
|
|
126
|
+
private renderOption;
|
|
81
127
|
render(): any;
|
|
82
128
|
}
|
|
83
129
|
//# sourceMappingURL=Select.d.ts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export type { SelectOption, SelectSize, SelectWidth } from './Select';
|
|
1
|
+
export type { SelectBackground, SelectOption, SelectSection, SelectSize, SelectWidth, } from './Select';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
+
import { type ControlWidth } from '../../utils';
|
|
3
|
+
import type { SelectBackground, SelectOption, SelectSection, SelectSize } from '../Select/Select';
|
|
4
|
+
export type SelectMultiOption = Omit<SelectOption, 'icon'>;
|
|
5
|
+
export type SelectMultiSection = Omit<SelectSection, 'options'> & {
|
|
6
|
+
options: SelectMultiOption[];
|
|
7
|
+
};
|
|
8
|
+
export type SelectMultiBackground = SelectBackground;
|
|
9
|
+
export type SelectMultiSize = SelectSize;
|
|
10
|
+
export type SelectMultiWidth = ControlWidth;
|
|
11
|
+
export declare class SelectMulti {
|
|
12
|
+
el: HTMLElement;
|
|
13
|
+
internals: ElementInternals;
|
|
14
|
+
/** Flat choices. Assign arrays through the JavaScript property. */
|
|
15
|
+
options: SelectMultiOption[];
|
|
16
|
+
/** Grouped choices; takes precedence over options. Assign through JavaScript. */
|
|
17
|
+
sections: SelectMultiSection[];
|
|
18
|
+
/** Selected values. Assign arrays through the JavaScript property. */
|
|
19
|
+
values: string[];
|
|
20
|
+
/** Controlled popup visibility. */
|
|
21
|
+
open: boolean;
|
|
22
|
+
/** Native form field name used for each repeated selected-value entry. */
|
|
23
|
+
name: string | undefined;
|
|
24
|
+
/** Native disabled state. */
|
|
25
|
+
disabled: boolean;
|
|
26
|
+
/** Require at least one valid selected value. */
|
|
27
|
+
required: boolean;
|
|
28
|
+
/** Validation message used when required is missing. */
|
|
29
|
+
requiredMessage: string;
|
|
30
|
+
/** Persistent trigger label; selected option labels never replace it. */
|
|
31
|
+
placeholder: string;
|
|
32
|
+
/** Control density. */
|
|
33
|
+
size: SelectMultiSize;
|
|
34
|
+
/** Width fit — hug content (default) or fill the parent. */
|
|
35
|
+
width: SelectMultiWidth;
|
|
36
|
+
/** Shared inactive treatment; removes interaction and form submission. */
|
|
37
|
+
isInactive: boolean;
|
|
38
|
+
/** Replace the prefix with a loader and disable option interaction. */
|
|
39
|
+
isLoading: boolean;
|
|
40
|
+
/** Show the selected interaction fill when at least one value exists. */
|
|
41
|
+
activeFill: boolean;
|
|
42
|
+
/** Show the surface-aware inset border. */
|
|
43
|
+
hasBorder: boolean;
|
|
44
|
+
/** Optional trigger prefix icon name. */
|
|
45
|
+
icon: string | undefined;
|
|
46
|
+
/** Show the clear-all footer action when values exist. */
|
|
47
|
+
allowClear: boolean;
|
|
48
|
+
/** Localized clear-all action label. */
|
|
49
|
+
clearLabel: string;
|
|
50
|
+
/** Localized noun displayed after the selected count. */
|
|
51
|
+
selectedLabel: string;
|
|
52
|
+
/** Show immediate local filtering over option labels, subtext, and section headings. */
|
|
53
|
+
searchable: boolean;
|
|
54
|
+
/** Localized search-field placeholder and accessible name. */
|
|
55
|
+
searchPlaceholder: string;
|
|
56
|
+
/** Localized empty-filter result text. */
|
|
57
|
+
noResultsText: string;
|
|
58
|
+
/** Accessible loading status label. */
|
|
59
|
+
loadingLabel: string;
|
|
60
|
+
/** Actual parent surface context; omit on primary and secondary surfaces. */
|
|
61
|
+
background: SelectMultiBackground | undefined;
|
|
62
|
+
/** Show invalid visual state. */
|
|
63
|
+
error: boolean;
|
|
64
|
+
/** Error text rendered below the trigger when error is true. */
|
|
65
|
+
errorMessage: string | undefined;
|
|
66
|
+
/** ID applied to the internal combobox trigger for external labels. */
|
|
67
|
+
inputId: string | undefined;
|
|
68
|
+
/** Direct accessible name when no external label is available. */
|
|
69
|
+
ariaLabel: string | null;
|
|
70
|
+
/** IDs of elements that label the combobox. */
|
|
71
|
+
ariaLabelledby: string | undefined;
|
|
72
|
+
/** Additional IDs that describe the combobox. */
|
|
73
|
+
ariaDescribedby: string | undefined;
|
|
74
|
+
/** Emitted after user toggles or clearing with a new values array. */
|
|
75
|
+
dsChange: EventEmitter<string[]>;
|
|
76
|
+
/** Emitted after the footer clear-all action. */
|
|
77
|
+
dsClear: EventEmitter<void>;
|
|
78
|
+
/** Emitted whenever popup visibility changes. */
|
|
79
|
+
dsOpenChange: EventEmitter<boolean>;
|
|
80
|
+
private activeIndex;
|
|
81
|
+
private searchTerm;
|
|
82
|
+
private formDisabled;
|
|
83
|
+
private position;
|
|
84
|
+
private positionReady;
|
|
85
|
+
private focusRingVisible;
|
|
86
|
+
private readonly generatedId;
|
|
87
|
+
private readonly listboxId;
|
|
88
|
+
private readonly errorId;
|
|
89
|
+
private triggerEl;
|
|
90
|
+
private popupEl;
|
|
91
|
+
private searchEl;
|
|
92
|
+
private initialValues;
|
|
93
|
+
private typeahead;
|
|
94
|
+
private typeaheadTimer;
|
|
95
|
+
private outsideHandler;
|
|
96
|
+
private repositionHandler;
|
|
97
|
+
componentWillLoad(): void;
|
|
98
|
+
componentDidLoad(): void;
|
|
99
|
+
disconnectedCallback(): void;
|
|
100
|
+
syncFormValue(): void;
|
|
101
|
+
onLoadingChange(): void;
|
|
102
|
+
onOpenChange(open: boolean): void;
|
|
103
|
+
onSearchTermChange(): void;
|
|
104
|
+
onActiveIndexChange(): void;
|
|
105
|
+
formDisabledCallback(disabled: boolean): void;
|
|
106
|
+
formResetCallback(): void;
|
|
107
|
+
formStateRestoreCallback(state: string | File | FormData | null): void;
|
|
108
|
+
setFocus(): Promise<void>;
|
|
109
|
+
private get isDisabled();
|
|
110
|
+
private get allSections();
|
|
111
|
+
private get allOptions();
|
|
112
|
+
private get visibleSections();
|
|
113
|
+
private get visibleOptions();
|
|
114
|
+
private get resolvedValues();
|
|
115
|
+
private get hasSelection();
|
|
116
|
+
private get activeOptionId();
|
|
117
|
+
private scrollActiveOptionIntoView;
|
|
118
|
+
private bindPopupListeners;
|
|
119
|
+
private unbindPopupListeners;
|
|
120
|
+
private updatePosition;
|
|
121
|
+
private openPopup;
|
|
122
|
+
private closePopup;
|
|
123
|
+
private toggleOption;
|
|
124
|
+
private clearSelection;
|
|
125
|
+
private handleTypeahead;
|
|
126
|
+
private handleListKeyDown;
|
|
127
|
+
private handleTriggerKeyDown;
|
|
128
|
+
private renderOption;
|
|
129
|
+
render(): any;
|
|
130
|
+
}
|
|
131
|
+
//# sourceMappingURL=SelectMulti.d.ts.map
|
|
@@ -9,6 +9,7 @@ export declare class Text {
|
|
|
9
9
|
*/
|
|
10
10
|
emphasis: boolean;
|
|
11
11
|
color: TextColor;
|
|
12
|
+
/** Link underline or dotted hidden-interaction affordance; does not add semantics. */
|
|
12
13
|
decoration: TextDecoration | undefined;
|
|
13
14
|
italic: boolean;
|
|
14
15
|
/** Animate the visible glyphs with the shared loading shimmer treatment. */
|