@hashicorp/design-system-components 4.21.0 → 4.21.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/declarations/components/hds/accordion/item/index.d.ts +2 -2
- package/declarations/components/hds/advanced-table/models/column.d.ts +7 -0
- package/declarations/components/hds/advanced-table/th-context-menu.d.ts +2 -4
- package/declarations/components/hds/advanced-table/th-resize-handle.d.ts +0 -1
- package/declarations/components/hds/advanced-table/th-sort.d.ts +1 -5
- package/declarations/components/hds/advanced-table/th.d.ts +0 -3
- package/declarations/components/hds/alert/index.d.ts +3 -4
- package/declarations/components/hds/app-header/index.d.ts +11 -2
- package/declarations/components/hds/badge/index.d.ts +3 -3
- package/declarations/components/hds/copy/button/index.d.ts +1 -1
- package/declarations/components/hds/copy/snippet/index.d.ts +1 -1
- package/declarations/components/hds/dropdown/index.d.ts +9 -9
- package/declarations/components/hds/dropdown/list-item/interactive.d.ts +1 -1
- package/declarations/components/hds/dropdown/toggle/button.d.ts +2 -2
- package/declarations/components/hds/dropdown/types.d.ts +2 -2
- package/declarations/components/hds/form/fieldset/index.d.ts +1 -0
- package/declarations/components/hds/form/header/title.d.ts +1 -1
- package/declarations/components/hds/form/super-select/multiple/base.d.ts +4 -3
- package/declarations/components/hds/form/super-select/single/base.d.ts +4 -3
- package/declarations/components/hds/form/text-input/base.d.ts +1 -1
- package/declarations/components/hds/layout/flex/index.d.ts +6 -5
- package/declarations/components/hds/layout/flex/types.d.ts +1 -0
- package/declarations/components/hds/layout/grid/index.d.ts +4 -2
- package/declarations/components/hds/layout/grid/types.d.ts +1 -0
- package/declarations/components/hds/link/inline.d.ts +3 -3
- package/declarations/components/hds/link/standalone.d.ts +4 -4
- package/declarations/components/hds/popover-primitive/index.d.ts +3 -3
- package/declarations/components/hds/rich-tooltip/bubble.d.ts +10 -10
- package/declarations/components/hds/stepper/step/indicator.d.ts +1 -1
- package/declarations/components/hds/stepper/task/indicator.d.ts +2 -2
- package/declarations/components/hds/tag/index.d.ts +4 -5
- package/declarations/components/hds/text/body.d.ts +2 -18
- package/declarations/components/hds/text/code.d.ts +2 -18
- package/declarations/components/hds/text/display.d.ts +2 -18
- package/declarations/components/hds/text/index.d.ts +2 -40
- package/declarations/components/hds/tooltip-button/index.d.ts +1 -1
- package/declarations/modifiers/hds-anchored-position.d.ts +5 -6
- package/declarations/template-registry.d.ts +2 -0
- package/dist/components/hds/accordion/item/index.js.map +1 -1
- package/dist/components/hds/advanced-table/index.js +1 -1
- package/dist/components/hds/advanced-table/models/column.js +31 -0
- package/dist/components/hds/advanced-table/models/column.js.map +1 -1
- package/dist/components/hds/advanced-table/th-context-menu.js +15 -7
- package/dist/components/hds/advanced-table/th-context-menu.js.map +1 -1
- package/dist/components/hds/advanced-table/th-resize-handle.js +16 -8
- package/dist/components/hds/advanced-table/th-resize-handle.js.map +1 -1
- package/dist/components/hds/advanced-table/th-sort.js +1 -2
- package/dist/components/hds/advanced-table/th-sort.js.map +1 -1
- package/dist/components/hds/advanced-table/th.js +1 -1
- package/dist/components/hds/advanced-table/th.js.map +1 -1
- package/dist/components/hds/alert/index.js.map +1 -1
- package/dist/components/hds/app-header/index.js +9 -1
- package/dist/components/hds/app-header/index.js.map +1 -1
- package/dist/components/hds/app-side-nav/list/index.js +1 -1
- package/dist/components/hds/badge/index.js.map +1 -1
- package/dist/components/hds/copy/button/index.js.map +1 -1
- package/dist/components/hds/copy/snippet/index.js.map +1 -1
- package/dist/components/hds/dropdown/index.js.map +1 -1
- package/dist/components/hds/dropdown/list-item/interactive.js.map +1 -1
- package/dist/components/hds/dropdown/toggle/button.js.map +1 -1
- package/dist/components/hds/dropdown/types.js.map +1 -1
- package/dist/components/hds/form/fieldset/index.js +2 -1
- package/dist/components/hds/form/fieldset/index.js.map +1 -1
- package/dist/components/hds/form/header/title.js +3 -3
- package/dist/components/hds/form/header/title.js.map +1 -1
- package/dist/components/hds/form/key-value-inputs/generic.js +1 -1
- package/dist/components/hds/form/super-select/multiple/base.js +12 -3
- package/dist/components/hds/form/super-select/multiple/base.js.map +1 -1
- package/dist/components/hds/form/super-select/single/base.js +11 -2
- package/dist/components/hds/form/super-select/single/base.js.map +1 -1
- package/dist/components/hds/form/text-input/base.js.map +1 -1
- package/dist/components/hds/layout/flex/index.js +4 -3
- package/dist/components/hds/layout/flex/index.js.map +1 -1
- package/dist/components/hds/layout/flex/types.js +1 -0
- package/dist/components/hds/layout/flex/types.js.map +1 -1
- package/dist/components/hds/layout/grid/index.js +4 -3
- package/dist/components/hds/layout/grid/index.js.map +1 -1
- package/dist/components/hds/layout/grid/types.js +1 -0
- package/dist/components/hds/layout/grid/types.js.map +1 -1
- package/dist/components/hds/link/inline.js +5 -5
- package/dist/components/hds/link/inline.js.map +1 -1
- package/dist/components/hds/link/standalone.js +5 -5
- package/dist/components/hds/link/standalone.js.map +1 -1
- package/dist/components/hds/popover-primitive/index.js.map +1 -1
- package/dist/components/hds/rich-tooltip/bubble.js.map +1 -1
- package/dist/components/hds/stepper/step/indicator.js.map +1 -1
- package/dist/components/hds/stepper/task/indicator.js.map +1 -1
- package/dist/components/hds/tag/index.js +26 -14
- package/dist/components/hds/tag/index.js.map +1 -1
- package/dist/components/hds/text/body.js +8 -22
- package/dist/components/hds/text/body.js.map +1 -1
- package/dist/components/hds/text/code.js +8 -22
- package/dist/components/hds/text/code.js.map +1 -1
- package/dist/components/hds/text/display.js +8 -22
- package/dist/components/hds/text/display.js.map +1 -1
- package/dist/components/hds/text/index.js +11 -45
- package/dist/components/hds/text/index.js.map +1 -1
- package/dist/components/hds/tooltip-button/index.js.map +1 -1
- package/dist/modifiers/hds-anchored-position.js.map +1 -1
- package/dist/styles/@hashicorp/design-system-components.css +35 -11
- package/dist/styles/components/app-side-nav/content.scss +9 -3
- package/dist/styles/components/form/radio-card.scss +8 -4
- package/dist/styles/components/layout/flex.scss +11 -1
- package/dist/styles/components/layout/grid.scss +18 -5
- package/dist/styles/components/side-nav/content.scss +1 -0
- package/package.json +4 -3
|
@@ -8,11 +8,11 @@ import type { HdsTextAligns, HdsTextColors, HdsTextTags, HdsTextWeights } from '
|
|
|
8
8
|
type HdsTextBodySizeNumber = Extract<HdsTextSizeValues, HdsTextSizeValues.OneHundred | HdsTextSizeValues.TwoHundred | HdsTextSizeValues.ThreeHundred>;
|
|
9
9
|
type HdsTextBodySizeString = `${HdsTextBodySizeNumber}`;
|
|
10
10
|
export type HdsTextBodySizes = HdsTextBodySizeNumber | HdsTextBodySizeString;
|
|
11
|
-
export declare const
|
|
11
|
+
export declare const SIZES: HdsTextBodySizes[];
|
|
12
12
|
export declare const DEFAULT_SIZE = HdsTextSizeValues.TwoHundred;
|
|
13
13
|
export declare const DEFAULT_WEIGHT = HdsTextWeightValues.Regular;
|
|
14
14
|
export type HdsTextBodyWeight = Extract<HdsTextWeights, 'regular' | 'medium' | 'semibold'>;
|
|
15
|
-
export declare const
|
|
15
|
+
export declare const WEIGHTS_PER_SIZE: Record<HdsTextBodySizes, HdsTextBodyWeight[]>;
|
|
16
16
|
export interface HdsTextBodySignature {
|
|
17
17
|
Args: {
|
|
18
18
|
size?: HdsTextBodySizes;
|
|
@@ -27,23 +27,7 @@ export interface HdsTextBodySignature {
|
|
|
27
27
|
};
|
|
28
28
|
}
|
|
29
29
|
export default class HdsTextBody extends Component<HdsTextBodySignature> {
|
|
30
|
-
/**
|
|
31
|
-
* Sets the "size" for the text
|
|
32
|
-
* Accepted values: see AVAILABLE_SIZES
|
|
33
|
-
*
|
|
34
|
-
* @param size
|
|
35
|
-
* @type {HdsTextBodySizes}
|
|
36
|
-
*
|
|
37
|
-
*/
|
|
38
30
|
get size(): HdsTextBodySizes;
|
|
39
|
-
/**
|
|
40
|
-
* Sets the "weight" for the text
|
|
41
|
-
* Accepted values: see AVAILABLE_WEIGHTS_PER_SIZE
|
|
42
|
-
*
|
|
43
|
-
* @param weight
|
|
44
|
-
* @type {HdsTextWeights}
|
|
45
|
-
*
|
|
46
|
-
*/
|
|
47
31
|
get weight(): HdsTextWeights;
|
|
48
32
|
}
|
|
49
33
|
export {};
|
|
@@ -8,11 +8,11 @@ import type { HdsTextAligns, HdsTextColors, HdsTextTags, HdsTextWeights } from '
|
|
|
8
8
|
type HdsTextCodeSizeNumber = Extract<HdsTextSizeValues, HdsTextSizeValues.OneHundred | HdsTextSizeValues.TwoHundred | HdsTextSizeValues.ThreeHundred>;
|
|
9
9
|
type HdsTextCodeSizeString = `${HdsTextCodeSizeNumber}`;
|
|
10
10
|
export type HdsTextCodeSizes = HdsTextCodeSizeNumber | HdsTextCodeSizeString;
|
|
11
|
-
export declare const
|
|
11
|
+
export declare const SIZES: HdsTextCodeSizes[];
|
|
12
12
|
export declare const DEFAULT_SIZE = HdsTextSizeValues.TwoHundred;
|
|
13
13
|
export declare const DEFAULT_WEIGHT = HdsTextWeightValues.Regular;
|
|
14
14
|
export type HdsTextCodeWeight = Extract<HdsTextWeights, 'regular' | 'bold'>;
|
|
15
|
-
export declare const
|
|
15
|
+
export declare const WEIGHTS_PER_SIZE: Record<HdsTextCodeSizes, HdsTextCodeWeight[]>;
|
|
16
16
|
export interface HdsTextCodeSignature {
|
|
17
17
|
Args: {
|
|
18
18
|
size?: HdsTextCodeSizes;
|
|
@@ -27,23 +27,7 @@ export interface HdsTextCodeSignature {
|
|
|
27
27
|
};
|
|
28
28
|
}
|
|
29
29
|
export default class HdsTextCode extends Component<HdsTextCodeSignature> {
|
|
30
|
-
/**
|
|
31
|
-
* Sets the "size" for the text
|
|
32
|
-
* Accepted values: see AVAILABLE_SIZES
|
|
33
|
-
*
|
|
34
|
-
* @type {HdsTextCodeSizes}
|
|
35
|
-
*
|
|
36
|
-
* @param size
|
|
37
|
-
*/
|
|
38
30
|
get size(): HdsTextCodeSizes;
|
|
39
|
-
/**
|
|
40
|
-
* Sets the "weight" for the text
|
|
41
|
-
* Accepted values: see AVAILABLE_WEIGHTS_PER_SIZE
|
|
42
|
-
*
|
|
43
|
-
* @type {string}
|
|
44
|
-
*
|
|
45
|
-
* @param variant
|
|
46
|
-
*/
|
|
47
31
|
get weight(): HdsTextCodeWeight;
|
|
48
32
|
}
|
|
49
33
|
export {};
|
|
@@ -6,10 +6,10 @@ import Component from '@glimmer/component';
|
|
|
6
6
|
import { HdsTextSizeValues } from './types.ts';
|
|
7
7
|
import type { HdsTextAligns, HdsTextColors, HdsTextSizes, HdsTextTags, HdsTextWeights } from './types.ts';
|
|
8
8
|
export declare const DEFAULT_SIZE = HdsTextSizeValues.TwoHundred;
|
|
9
|
-
export declare const
|
|
9
|
+
export declare const SIZES: HdsTextSizes[];
|
|
10
10
|
export type HdsTextDisplayWeight = Extract<HdsTextWeights, 'medium' | 'semibold' | 'bold'>;
|
|
11
11
|
export declare const DEFAULT_WEIGHTS_PER_SIZE: Record<HdsTextSizeValues, HdsTextDisplayWeight>;
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const WEIGHTS_PER_SIZE: Record<HdsTextSizes, HdsTextDisplayWeight[]>;
|
|
13
13
|
export interface HdsTextDisplaySignature {
|
|
14
14
|
Args: {
|
|
15
15
|
size?: HdsTextSizes;
|
|
@@ -24,22 +24,6 @@ export interface HdsTextDisplaySignature {
|
|
|
24
24
|
};
|
|
25
25
|
}
|
|
26
26
|
export default class HdsTextDisplay extends Component<HdsTextDisplaySignature> {
|
|
27
|
-
/**
|
|
28
|
-
* Sets the "size" for the text
|
|
29
|
-
* Accepted values: see AVAILABLE_SIZES
|
|
30
|
-
*
|
|
31
|
-
* @type {HdsTextSizes}
|
|
32
|
-
*
|
|
33
|
-
* @param size
|
|
34
|
-
*/
|
|
35
27
|
get size(): HdsTextSizes;
|
|
36
|
-
/**
|
|
37
|
-
* Sets the "weight" for the text
|
|
38
|
-
* Accepted values: see AVAILABLE_WEIGHTS_PER_SIZE
|
|
39
|
-
*
|
|
40
|
-
* @type {HdsTextDisplayWeight}
|
|
41
|
-
*
|
|
42
|
-
* @param variant
|
|
43
|
-
*/
|
|
44
28
|
get weight(): HdsTextDisplayWeight;
|
|
45
29
|
}
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
*/
|
|
5
5
|
import Component from '@glimmer/component';
|
|
6
6
|
import type { HdsTextAligns, HdsTextColors, HdsTextGroups, HdsTextSizes, HdsTextTags, HdsTextWeights } from './types.ts';
|
|
7
|
-
export declare const
|
|
8
|
-
export declare const
|
|
7
|
+
export declare const COLORS: HdsTextColors[];
|
|
8
|
+
export declare const ALIGNS: HdsTextAligns[];
|
|
9
9
|
type AvailableElements = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
|
|
10
10
|
export interface HdsTextSignature {
|
|
11
11
|
Args: {
|
|
@@ -22,49 +22,11 @@ export interface HdsTextSignature {
|
|
|
22
22
|
};
|
|
23
23
|
}
|
|
24
24
|
export default class HdsText extends Component<HdsTextSignature> {
|
|
25
|
-
/**
|
|
26
|
-
* Get a tag to render based on the `@tag` argument passed or the value of `this.size` (via mapping)
|
|
27
|
-
*
|
|
28
|
-
* @method #componentTag
|
|
29
|
-
* @return {HdsTextTags} The html tag to use in the dynamic render of the component
|
|
30
|
-
*/
|
|
31
25
|
get componentTag(): HdsTextTags;
|
|
32
|
-
/**
|
|
33
|
-
* Sets the "variant" (style) for the text
|
|
34
|
-
* Accepted values: see AVAILABLE_VARIANTS
|
|
35
|
-
*
|
|
36
|
-
* @param variant
|
|
37
|
-
* @type {string}
|
|
38
|
-
*/
|
|
39
26
|
get variant(): string;
|
|
40
|
-
/**
|
|
41
|
-
* Sets the alignment of the text
|
|
42
|
-
* Accepted values: see AVAILABLE_ALIGNS
|
|
43
|
-
*
|
|
44
|
-
* @param align
|
|
45
|
-
* @type {HdsTextAligns}
|
|
46
|
-
*/
|
|
47
27
|
get align(): HdsTextAligns | undefined;
|
|
48
|
-
/**
|
|
49
|
-
* Sets the color of the text as pre-defined value
|
|
50
|
-
* Accepted values: see AVAILABLE_COLORS
|
|
51
|
-
*
|
|
52
|
-
* @param color
|
|
53
|
-
* @type {HdsTextColors}
|
|
54
|
-
*/
|
|
55
28
|
get predefinedColor(): HdsTextColors | undefined;
|
|
56
|
-
/**
|
|
57
|
-
* Sets the color of the text as custom value (via inline style)
|
|
58
|
-
*
|
|
59
|
-
* @param color
|
|
60
|
-
* @type {string}
|
|
61
|
-
*/
|
|
62
29
|
get customColor(): string | undefined;
|
|
63
|
-
/**
|
|
64
|
-
* Get the class names to apply to the component.
|
|
65
|
-
* @method #classNames
|
|
66
|
-
* @return {string} The "class" attribute to apply to the component.
|
|
67
|
-
*/
|
|
68
30
|
get classNames(): string;
|
|
69
31
|
}
|
|
70
32
|
export {};
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import Component from '@glimmer/component';
|
|
6
6
|
import type { Props as TippyProps } from 'tippy.js';
|
|
7
7
|
import type { HdsTooltipPlacements } from './types.ts';
|
|
8
|
-
export declare const PLACEMENTS:
|
|
8
|
+
export declare const PLACEMENTS: HdsTooltipPlacements[];
|
|
9
9
|
export interface HdsTooltipSignature {
|
|
10
10
|
Args: {
|
|
11
11
|
extraTippyOptions?: Partial<Omit<TippyProps, 'placement' | 'offset'>>;
|
|
@@ -18,6 +18,9 @@ export type FloatingUIOptions = {
|
|
|
18
18
|
arrowPadding?: ArrowOptions['padding'];
|
|
19
19
|
matchToggleWidth?: boolean;
|
|
20
20
|
};
|
|
21
|
+
export type HdsAnchoredPositionOptions = FloatingUIOptions & {
|
|
22
|
+
arrowSelector?: string;
|
|
23
|
+
};
|
|
21
24
|
export declare const getFloatingUIOptions: (options: FloatingUIOptions) => {
|
|
22
25
|
placement: Placement;
|
|
23
26
|
strategy: Strategy;
|
|
@@ -27,17 +30,13 @@ export interface HdsAnchoredPositionSignature {
|
|
|
27
30
|
Element: HTMLElement;
|
|
28
31
|
Args: {
|
|
29
32
|
Positional: [HTMLElement | SVGElement];
|
|
30
|
-
Named:
|
|
31
|
-
arrowSelector?: string;
|
|
32
|
-
};
|
|
33
|
+
Named: HdsAnchoredPositionOptions;
|
|
33
34
|
};
|
|
34
35
|
}
|
|
35
36
|
declare const _default: import("ember-modifier").FunctionBasedModifier<{
|
|
36
37
|
Element: HTMLElement;
|
|
37
38
|
Args: {
|
|
38
|
-
Named:
|
|
39
|
-
arrowSelector?: string;
|
|
40
|
-
};
|
|
39
|
+
Named: HdsAnchoredPositionOptions;
|
|
41
40
|
Positional: [HTMLElement | SVGElement];
|
|
42
41
|
};
|
|
43
42
|
}>;
|
|
@@ -358,6 +358,8 @@ export default interface HdsComponentsRegistry {
|
|
|
358
358
|
'hds/button-set': typeof HdsButtonSetComponent;
|
|
359
359
|
'Hds::Card': typeof HdsCardContainerComponent;
|
|
360
360
|
'hds/card': typeof HdsCardContainerComponent;
|
|
361
|
+
'Hds::Card::Container': typeof HdsCardContainerComponent;
|
|
362
|
+
'hds/card/container': typeof HdsCardContainerComponent;
|
|
361
363
|
'Hds::CodeBlock': typeof HdsCodeBlockComponent;
|
|
362
364
|
'hds/code-block': typeof HdsCodeBlockComponent;
|
|
363
365
|
'Hds::CodeBlock::CopyButton': typeof HdsCodeBlockCopyButtonComponent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/accordion/item/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { assert } from '@ember/debug';\nimport { guidFor } from '@ember/object/internals';\n\nimport {\n HdsAccordionSizeValues,\n HdsAccordionTypeValues,\n HdsAccordionItemTitleTagValues,\n} from '../types.ts';\nimport type {\n HdsAccordionForceStates,\n HdsAccordionSizes,\n HdsAccordionTypes,\n HdsAccordionItemTitleTags,\n} from '../types.ts';\n\nexport const SIZES:
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/hds/accordion/item/index.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { assert } from '@ember/debug';\nimport { guidFor } from '@ember/object/internals';\n\nimport {\n HdsAccordionSizeValues,\n HdsAccordionTypeValues,\n HdsAccordionItemTitleTagValues,\n} from '../types.ts';\nimport type {\n HdsAccordionForceStates,\n HdsAccordionSizes,\n HdsAccordionTypes,\n HdsAccordionItemTitleTags,\n} from '../types.ts';\n\nexport const SIZES: HdsAccordionSizes[] = Object.values(HdsAccordionSizeValues);\nexport const DEFAULT_SIZE = HdsAccordionSizeValues.Medium;\n\nexport const TYPES: HdsAccordionTypes[] = Object.values(HdsAccordionTypeValues);\nexport const DEFAULT_TYPE = HdsAccordionTypeValues.Card;\n\nconst TEXT_SIZE_MAP = {\n small: 100,\n medium: 200,\n large: 300,\n};\n\nexport interface HdsAccordionItemSignature {\n Args: {\n ariaLabel?: string;\n containsInteractive?: boolean;\n forceState?: HdsAccordionForceStates;\n isOpen?: boolean;\n isStatic?: boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onClickToggle?: (event: MouseEvent, ...args: any[]) => void;\n size?: HdsAccordionSizes;\n titleTag?: HdsAccordionItemTitleTags;\n type?: HdsAccordionTypes;\n };\n Blocks: {\n toggle?: [];\n content: [\n {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n close: (...args: any[]) => void;\n },\n ];\n };\n Element: HTMLElement;\n}\n\nexport default class HdsAccordionItem extends Component<HdsAccordionItemSignature> {\n private _titleId = 'title-' + guidFor(this);\n\n get ariaLabelledBy(): string | undefined {\n if (!this.args.ariaLabel) {\n return this._titleId;\n }\n return undefined;\n }\n\n /**\n * @param containsInteractive\n * @type {boolean}\n * @default false\n */\n get containsInteractive(): boolean {\n return this.args.containsInteractive ?? false;\n }\n\n /**\n * @param toggleTextSize\n * @type {HdsTextSizes}\n * @default 'medium'\n */\n get toggleTextSize(): number {\n const size = this.args.size ?? DEFAULT_SIZE;\n return TEXT_SIZE_MAP[size];\n }\n\n /**\n * Sets the size for the component\n *\n * @param size\n * @type {HdsAccordionSizes}\n * @default 'medium'\n */\n get size(): HdsAccordionSizes {\n const { size = DEFAULT_SIZE } = this.args;\n\n assert(\n `@size for \"Hds::Accordion::Item\" must be one of the following: ${SIZES.join(\n ', '\n )}; received: ${size}`,\n SIZES.includes(size)\n );\n\n return size;\n }\n\n /**\n * Sets the type of the component\n *\n * @param type\n * @type {HdsAccordionTypes}\n * @default 'card'\n */\n get type(): HdsAccordionTypes {\n const { type = DEFAULT_TYPE } = this.args;\n\n assert(\n `@type for \"Hds::Accordion::Item\" must be one of the following: ${TYPES.join(\n ', '\n )}; received: ${type}`,\n TYPES.includes(type)\n );\n\n return type;\n }\n\n get titleTag(): HdsAccordionItemTitleTags {\n return this.args.titleTag ?? HdsAccordionItemTitleTagValues.Div;\n }\n\n /**\n * Get the class names to apply to the component.\n * @method classNames\n * @return {string} The \"class\" attribute to apply to the component.\n */\n get classNames(): string {\n const classes = ['hds-accordion-item'];\n\n // add a class based on the @isOpen argument\n if (this.args.isOpen) {\n classes.push('hds-accordion-item--is-open');\n }\n\n // add a class based on the @isStatic argument\n if (this.args.isStatic) {\n classes.push('hds-accordion-item--is-static');\n }\n\n // add a class based on the @size argument\n classes.push(`hds-accordion-item--size-${this.size}`);\n\n // add a class based on the @type argument\n classes.push(`hds-accordion-item--type-${this.type}`);\n\n if (this.containsInteractive) {\n // Entire accordion item including the chevron is interactive:\n classes.push('hds-accordion-item--contains-interactive');\n } else {\n // Only chevron is interactive:\n classes.push('hds-accordion-item--does-not-contain-interactive');\n }\n\n return classes.join(' ');\n }\n}\n"],"names":["SIZES","Object","values","HdsAccordionSizeValues","DEFAULT_SIZE","Medium","TYPES","HdsAccordionTypeValues","DEFAULT_TYPE","Card","TEXT_SIZE_MAP","small","medium","large","HdsAccordionItem","Component","_titleId","guidFor","ariaLabelledBy","args","ariaLabel","undefined","containsInteractive","toggleTextSize","size","assert","join","includes","type","titleTag","HdsAccordionItemTitleTagValues","Div","classNames","classes","isOpen","push","isStatic","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;;AAkBO,MAAMA,KAA0B,GAAGC,MAAM,CAACC,MAAM,CAACC,sBAAsB;AACjEC,MAAAA,YAAY,GAAGD,sBAAsB,CAACE;AAE5C,MAAMC,KAA0B,GAAGL,MAAM,CAACC,MAAM,CAACK,sBAAsB;AACjEC,MAAAA,YAAY,GAAGD,sBAAsB,CAACE;AAEnD,MAAMC,aAAa,GAAG;AACpBC,EAAAA,KAAK,EAAE,GAAG;AACVC,EAAAA,MAAM,EAAE,GAAG;AACXC,EAAAA,KAAK,EAAE;AACT,CAAC;AA2Bc,MAAMC,gBAAgB,SAASC,SAAS,CAA4B;AACzEC,EAAAA,QAAQ,GAAG,QAAQ,GAAGC,OAAO,CAAC,IAAI,CAAC;EAE3C,IAAIC,cAAcA,GAAuB;AACvC,IAAA,IAAI,CAAC,IAAI,CAACC,IAAI,CAACC,SAAS,EAAE;MACxB,OAAO,IAAI,CAACJ,QAAQ;AACtB;AACA,IAAA,OAAOK,SAAS;AAClB;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIC,mBAAmBA,GAAY;AACjC,IAAA,OAAO,IAAI,CAACH,IAAI,CAACG,mBAAmB,IAAI,KAAK;AAC/C;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIC,cAAcA,GAAW;IAC3B,MAAMC,IAAI,GAAG,IAAI,CAACL,IAAI,CAACK,IAAI,IAAIpB,YAAY;IAC3C,OAAOM,aAAa,CAACc,IAAI,CAAC;AAC5B;;AAEA;AACF;AACA;AACA;AACA;AACA;AACA;EACE,IAAIA,IAAIA,GAAsB;IAC5B,MAAM;AAAEA,MAAAA,IAAI,GAAGpB;KAAc,GAAG,IAAI,CAACe,IAAI;AAEzCM,IAAAA,MAAM,CACJ,CAAkEzB,+DAAAA,EAAAA,KAAK,CAAC0B,IAAI,CAC1E,IACF,CAAC,CAAA,YAAA,EAAeF,IAAI,CAAA,CAAE,EACtBxB,KAAK,CAAC2B,QAAQ,CAACH,IAAI,CACrB,CAAC;AAED,IAAA,OAAOA,IAAI;AACb;;AAEA;AACF;AACA;AACA;AACA;AACA;AACA;EACE,IAAII,IAAIA,GAAsB;IAC5B,MAAM;AAAEA,MAAAA,IAAI,GAAGpB;KAAc,GAAG,IAAI,CAACW,IAAI;AAEzCM,IAAAA,MAAM,CACJ,CAAkEnB,+DAAAA,EAAAA,KAAK,CAACoB,IAAI,CAC1E,IACF,CAAC,CAAA,YAAA,EAAeE,IAAI,CAAA,CAAE,EACtBtB,KAAK,CAACqB,QAAQ,CAACC,IAAI,CACrB,CAAC;AAED,IAAA,OAAOA,IAAI;AACb;EAEA,IAAIC,QAAQA,GAA8B;IACxC,OAAO,IAAI,CAACV,IAAI,CAACU,QAAQ,IAAIC,8BAA8B,CAACC,GAAG;AACjE;;AAEA;AACF;AACA;AACA;AACA;EACE,IAAIC,UAAUA,GAAW;AACvB,IAAA,MAAMC,OAAO,GAAG,CAAC,oBAAoB,CAAC;;AAEtC;AACA,IAAA,IAAI,IAAI,CAACd,IAAI,CAACe,MAAM,EAAE;AACpBD,MAAAA,OAAO,CAACE,IAAI,CAAC,6BAA6B,CAAC;AAC7C;;AAEA;AACA,IAAA,IAAI,IAAI,CAAChB,IAAI,CAACiB,QAAQ,EAAE;AACtBH,MAAAA,OAAO,CAACE,IAAI,CAAC,+BAA+B,CAAC;AAC/C;;AAEA;IACAF,OAAO,CAACE,IAAI,CAAC,CAAA,yBAAA,EAA4B,IAAI,CAACX,IAAI,EAAE,CAAC;;AAErD;IACAS,OAAO,CAACE,IAAI,CAAC,CAAA,yBAAA,EAA4B,IAAI,CAACP,IAAI,EAAE,CAAC;IAErD,IAAI,IAAI,CAACN,mBAAmB,EAAE;AAC5B;AACAW,MAAAA,OAAO,CAACE,IAAI,CAAC,0CAA0C,CAAC;AAC1D,KAAC,MAAM;AACL;AACAF,MAAAA,OAAO,CAACE,IAAI,CAAC,kDAAkD,CAAC;AAClE;AAEA,IAAA,OAAOF,OAAO,CAACP,IAAI,CAAC,GAAG,CAAC;AAC1B;AACF;AAACW,oBAAA,CAAAC,QAAA,EA3GoBxB,gBAAgB,CAAA;;;;"}
|
|
@@ -11,7 +11,7 @@ import { precompileTemplate } from '@ember/template-compilation';
|
|
|
11
11
|
import { g, i, n } from 'decorator-transforms/runtime';
|
|
12
12
|
import { setComponentTemplate } from '@ember/component';
|
|
13
13
|
|
|
14
|
-
var TEMPLATE = precompileTemplate("{{!\n Copyright (c) HashiCorp, Inc.\n SPDX-License-Identifier: MPL-2.0\n}}\n<div\n class=\"hds-advanced-table__container\n {{(if this.isStickyHeaderPinned \'hds-advanced-table__container--header-is-pinned\')}}\"\n {{did-update this.setupTableModelData @columns @model @sortBy @sortOrder}}\n ...attributes\n>\n {{! Caption }}\n <div id={{this._captionId}} class=\"sr-only hds-advanced-table__caption\" aria-live=\"polite\">\n {{@caption}}\n {{this.sortedMessageText}}\n </div>\n\n {{! Grid }}\n <div\n class={{this.classNames}}\n role=\"grid\"\n aria-describedby={{this._captionId}}\n {{style\n grid-template-columns=this.gridTemplateColumns\n --hds-advanced-table-sticky-column-offset=this.stickyColumnOffset\n max-height=@maxHeight\n }}\n {{this._setUpScrollWrapper}}\n >\n {{! Header }}\n <div class={{this.theadClassNames}} role=\"rowgroup\" {{this._setUpThead}}>\n <Hds::AdvancedTable::Tr\n @selectionScope=\"col\"\n @onClickSortBySelected={{if @selectableColumnKey (fn this._tableModel.setSortBy @selectableColumnKey)}}\n @sortBySelectedOrder={{if (eq this._tableModel.sortBy @selectableColumnKey) this._tableModel.sortOrder}}\n @isSelectable={{this.isSelectable}}\n @onSelectionChange={{this.onSelectionAllChange}}\n @didInsert={{this.didInsertSelectAllCheckbox}}\n @willDestroy={{this.willDestroySelectAllCheckbox}}\n @selectionAriaLabelSuffix=\"all rows\"\n @hasStickyColumn={{@hasStickyFirstColumn}}\n @isStickyColumnPinned={{this.isStickyColumnPinned}}\n >\n {{#each this._tableModel.columns as |column index|}}\n {{#if column.isSortable}}\n <Hds::AdvancedTable::ThSort\n @column={{column}}\n @sortOrder={{if (eq column.key this._tableModel.sortBy) this._tableModel.sortOrder}}\n @onClickSort={{if column.key (fn this._tableModel.setSortBy column.key)}}\n @align={{column.align}}\n @tooltip={{column.tooltip}}\n @hasResizableColumns={{@hasResizableColumns}}\n @
|
|
14
|
+
var TEMPLATE = precompileTemplate("{{!\n Copyright (c) HashiCorp, Inc.\n SPDX-License-Identifier: MPL-2.0\n}}\n<div\n class=\"hds-advanced-table__container\n {{(if this.isStickyHeaderPinned \'hds-advanced-table__container--header-is-pinned\')}}\"\n {{did-update this.setupTableModelData @columns @model @sortBy @sortOrder}}\n ...attributes\n>\n {{! Caption }}\n <div id={{this._captionId}} class=\"sr-only hds-advanced-table__caption\" aria-live=\"polite\">\n {{@caption}}\n {{this.sortedMessageText}}\n </div>\n\n {{! Grid }}\n <div\n class={{this.classNames}}\n role=\"grid\"\n aria-describedby={{this._captionId}}\n {{style\n grid-template-columns=this.gridTemplateColumns\n --hds-advanced-table-sticky-column-offset=this.stickyColumnOffset\n max-height=@maxHeight\n }}\n {{this._setUpScrollWrapper}}\n >\n {{! Header }}\n <div class={{this.theadClassNames}} role=\"rowgroup\" {{this._setUpThead}}>\n <Hds::AdvancedTable::Tr\n @selectionScope=\"col\"\n @onClickSortBySelected={{if @selectableColumnKey (fn this._tableModel.setSortBy @selectableColumnKey)}}\n @sortBySelectedOrder={{if (eq this._tableModel.sortBy @selectableColumnKey) this._tableModel.sortOrder}}\n @isSelectable={{this.isSelectable}}\n @onSelectionChange={{this.onSelectionAllChange}}\n @didInsert={{this.didInsertSelectAllCheckbox}}\n @willDestroy={{this.willDestroySelectAllCheckbox}}\n @selectionAriaLabelSuffix=\"all rows\"\n @hasStickyColumn={{@hasStickyFirstColumn}}\n @isStickyColumnPinned={{this.isStickyColumnPinned}}\n >\n {{#each this._tableModel.columns as |column index|}}\n {{#if column.isSortable}}\n <Hds::AdvancedTable::ThSort\n @column={{column}}\n @sortOrder={{if (eq column.key this._tableModel.sortBy) this._tableModel.sortOrder}}\n @onClickSort={{if column.key (fn this._tableModel.setSortBy column.key)}}\n @align={{column.align}}\n @tooltip={{column.tooltip}}\n @hasResizableColumns={{@hasResizableColumns}}\n @isStickyColumn={{if (and (eq index 0) @hasStickyFirstColumn) true}}\n @isStickyColumnPinned={{this.isStickyColumnPinned}}\n @tableHeight={{this._tableHeight}}\n @onColumnResize={{@onColumnResize}}\n {{this._setColumnWidth column}}\n >\n {{column.label}}\n </Hds::AdvancedTable::ThSort>\n {{else}}\n <Hds::AdvancedTable::Th\n @align={{column.align}}\n @column={{column}}\n @hasExpandAllButton={{this._tableModel.hasRowsWithChildren}}\n @hasResizableColumns={{@hasResizableColumns}}\n @isExpanded={{this._tableModel.expandState}}\n @isExpandable={{column.isExpandable}}\n @isStickyColumn={{if (and (eq index 0) @hasStickyFirstColumn) true}}\n @isStickyColumnPinned={{this.isStickyColumnPinned}}\n @isVisuallyHidden={{column.isVisuallyHidden}}\n @tableHeight={{this._tableHeight}}\n @tooltip={{column.tooltip}}\n @onClickToggle={{this._tableModel.toggleAll}}\n @onColumnResize={{@onColumnResize}}\n {{this._setColumnWidth column}}\n >\n {{column.label}}\n </Hds::AdvancedTable::Th>\n {{/if}}\n {{/each}}\n </Hds::AdvancedTable::Tr>\n </div>\n\n {{! Body }}\n <div class=\"hds-advanced-table__tbody\" role=\"rowgroup\">\n {{! ----------------------------------------------------------------------------------------\n IMPORTANT: we loop on the `model` array and for each record\n we yield the Tr/Td/Th elements _and_ the record itself as `data`\n this means the consumer will *have to* use the `data` key to access it in their template\n -------------------------------------------------------------------------------------------- }}\n {{#each this._tableModel.sortedRows key=this.identityKey as |record index|}}\n {{#if this._tableModel.hasRowsWithChildren}}\n <Hds::AdvancedTable::ExpandableTrGroup\n @record={{record}}\n @rowIndex={{index}}\n @onClickToggle={{record.onClickToggle}}\n as |T|\n >\n {{yield\n (hash\n Tr=(component\n \"hds/advanced-table/tr\"\n isLastRow=(eq this._tableModel.lastVisibleRow.id T.data.id)\n isParentRow=T.isExpandable\n depth=T.depth\n displayRow=T.shouldDisplayChildRows\n )\n Th=(component\n \"hds/advanced-table/th\"\n depth=T.depth\n isExpandable=T.isExpandable\n isExpanded=T.isExpanded\n newLabel=T.id\n parentId=T.parentId\n scope=\"row\"\n onClickToggle=T.onClickToggle\n )\n Td=(component \"hds/advanced-table/td\" align=@align)\n data=T.data\n isOpen=T.isExpanded\n rowIndex=T.rowIndex\n )\n to=\"body\"\n }}\n </Hds::AdvancedTable::ExpandableTrGroup>\n {{else}}\n {{yield\n (hash\n Tr=(component\n \"hds/advanced-table/tr\"\n selectionScope=\"row\"\n isLastRow=(eq this._tableModel.lastVisibleRow.id record.id)\n isSelectable=this.isSelectable\n onSelectionChange=this.onSelectionRowChange\n didInsert=this.didInsertRowCheckbox\n willDestroy=this.willDestroyRowCheckbox\n selectionAriaLabelSuffix=@selectionAriaLabelSuffix\n hasStickyColumn=@hasStickyFirstColumn\n isStickyColumnPinned=this.isStickyColumnPinned\n )\n Th=(component\n \"hds/advanced-table/th\"\n scope=\"row\"\n isStickyColumn=@hasStickyFirstColumn\n isStickyColumnPinned=this.isStickyColumnPinned\n )\n Td=(component \"hds/advanced-table/td\" align=@align)\n data=record\n rowIndex=index\n )\n to=\"body\"\n }}\n {{/if}}\n {{/each}}\n </div>\n </div>\n\n {{#if this.showScrollIndicatorLeft}}\n <div\n class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-left\"\n {{style height=this.scrollIndicatorDimensions.height left=this.scrollIndicatorDimensions.left}}\n />\n {{/if}}\n\n {{#if this.showScrollIndicatorRight}}\n <div\n class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-right\"\n {{style height=this.scrollIndicatorDimensions.height right=this.scrollIndicatorDimensions.right}}\n />\n {{/if}}\n\n {{#if this.showScrollIndicatorTop}}\n <div\n class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-top\"\n {{style top=this.scrollIndicatorDimensions.top width=this.scrollIndicatorDimensions.width}}\n />\n {{/if}}\n\n {{#if this.showScrollIndicatorBottom}}\n <div\n class=\"hds-advanced-table__scroll-indicator hds-advanced-table__scroll-indicator-bottom\"\n {{style bottom=this.scrollIndicatorDimensions.bottom width=this.scrollIndicatorDimensions.width}}\n />\n {{/if}}\n</div>");
|
|
15
15
|
|
|
16
16
|
/**
|
|
17
17
|
* Copyright (c) HashiCorp, Inc.
|
|
@@ -122,6 +122,37 @@ class HdsAdvancedTableColumn {
|
|
|
122
122
|
return pxToNumber(this.maxWidth);
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
|
+
get index() {
|
|
126
|
+
const {
|
|
127
|
+
columns
|
|
128
|
+
} = this.table;
|
|
129
|
+
if (columns.length === 0) {
|
|
130
|
+
return -1;
|
|
131
|
+
}
|
|
132
|
+
return columns.findIndex(column => column.key === this.key);
|
|
133
|
+
}
|
|
134
|
+
get isFirst() {
|
|
135
|
+
return this.index === 0;
|
|
136
|
+
}
|
|
137
|
+
get isLast() {
|
|
138
|
+
return this.index !== -1 && this.index === this.table.columns.length - 1;
|
|
139
|
+
}
|
|
140
|
+
get siblings() {
|
|
141
|
+
const {
|
|
142
|
+
index,
|
|
143
|
+
table
|
|
144
|
+
} = this;
|
|
145
|
+
const {
|
|
146
|
+
columns
|
|
147
|
+
} = table;
|
|
148
|
+
if (index === -1) {
|
|
149
|
+
return {};
|
|
150
|
+
}
|
|
151
|
+
return {
|
|
152
|
+
previous: this.isFirst ? undefined : columns[index - 1],
|
|
153
|
+
next: this.isLast ? undefined : columns[index + 1]
|
|
154
|
+
};
|
|
155
|
+
}
|
|
125
156
|
constructor(args) {
|
|
126
157
|
const {
|
|
127
158
|
column,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"column.js","sources":["../../../../../src/components/hds/advanced-table/models/column.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\n\nimport type HdsAdvancedTableModel from './table.ts';\nimport type {\n HdsAdvancedTableHorizontalAlignment,\n HdsAdvancedTableColumn as HdsAdvancedTableColumnType,\n} from '../types';\n\nexport const DEFAULT_MIN_WIDTH = '150px';\nexport const DEFAULT_MAX_WIDTH = '800px';\n\nfunction isPxSize(value?: string): boolean {\n if (value === undefined) {\n return false;\n }\n\n return /^-?\\d+(\\.\\d+)?px$/.test(value);\n}\n\nfunction pxToNumber(pxString: string): number {\n return parseFloat(pxString.slice(0, -2));\n}\n\nexport default class HdsAdvancedTableColumn {\n @tracked label: string = '';\n @tracked align?: HdsAdvancedTableHorizontalAlignment = 'left';\n @tracked isExpandable?: boolean = false;\n @tracked isReorderable?: boolean = false;\n @tracked isSortable?: boolean = false;\n @tracked isVisuallyHidden?: boolean = false;\n @tracked key?: string = undefined;\n @tracked minWidth?: `${number}px` = DEFAULT_MIN_WIDTH;\n @tracked maxWidth?: `${number}px` = DEFAULT_MAX_WIDTH;\n @tracked tooltip?: string = undefined;\n @tracked width?: string = undefined;\n @tracked originalWidth?: string = undefined; // used to restore the width when resetting\n @tracked imposedWidthDelta: number = 0; // used to track the width change imposed by the previous column\n\n @tracked sortingFunction?: (a: unknown, b: unknown) => number = undefined;\n\n table: HdsAdvancedTableModel;\n\n get pxWidth(): number | undefined {\n if (isPxSize(this.width)) {\n return pxToNumber(this.width!);\n }\n }\n set pxWidth(value: number) {\n this.width = `${value}px`;\n }\n\n get pxMinWidth(): number | undefined {\n if (isPxSize(this.minWidth)) {\n return pxToNumber(this.minWidth!);\n }\n }\n\n get pxMaxWidth(): number | undefined {\n if (isPxSize(this.maxWidth)) {\n return pxToNumber(this.maxWidth!);\n }\n }\n\n constructor(args: {\n column: HdsAdvancedTableColumnType;\n table: HdsAdvancedTableModel;\n }) {\n const { column, table } = args;\n\n // set reference to table model\n this.table = table;\n\n // set column properties\n this.label = column.label;\n this.align = column.align ?? 'left';\n this.isExpandable = 'isExpandable' in column ? column.isExpandable : false;\n this.isSortable = column.isSortable ?? false;\n this.isVisuallyHidden = column.isVisuallyHidden ?? false;\n this.key = column.key;\n this.tooltip = column.tooltip;\n this._setWidthValues(column);\n this.sortingFunction = column.sortingFunction;\n }\n\n private _setWidthValues({\n width,\n minWidth,\n maxWidth,\n }: HdsAdvancedTableColumnType): void {\n if (width === undefined) {\n return;\n }\n\n this.width = width;\n\n // capture the width at the time of instantiation so it can be restored\n this.originalWidth = width;\n\n this.minWidth = minWidth ?? DEFAULT_MIN_WIDTH;\n this.maxWidth = maxWidth ?? DEFAULT_MAX_WIDTH;\n }\n\n // Sets the column width in pixels, ensuring it respects the min and max width constraints.\n @action\n setPxWidth(newPxWidth: number): void {\n const pxMinWidth = this.pxMinWidth ?? 1;\n const minLimitedPxWidth = Math.max(newPxWidth, pxMinWidth);\n\n this.pxWidth =\n this.pxMaxWidth !== undefined\n ? Math.min(minLimitedPxWidth, this.pxMaxWidth)\n : minLimitedPxWidth;\n\n if (this.key === undefined) {\n return;\n }\n }\n\n // This method is called when the column width is changed by the previous column.\n @action\n onPreviousColumnWidthRestored(): void {\n const restoredWidth = (this.pxWidth ?? 0) + this.imposedWidthDelta;\n\n this.setPxWidth(restoredWidth);\n\n this.imposedWidthDelta = 0;\n }\n\n // This method is called when the next column width is restored.\n @action\n onNextColumnWidthRestored(imposedWidthDelta: number): void {\n this.setPxWidth((this.pxWidth ?? 0) - imposedWidthDelta);\n }\n\n @action\n restoreWidth(): void {\n this.width = this.originalWidth;\n this.imposedWidthDelta = 0;\n\n if (this.key === undefined) {\n return;\n }\n }\n}\n"],"names":["DEFAULT_MIN_WIDTH","DEFAULT_MAX_WIDTH","isPxSize","value","undefined","test","pxToNumber","pxString","parseFloat","slice","HdsAdvancedTableColumn","g","prototype","tracked","i","void 0","table","pxWidth","width","pxMinWidth","minWidth","pxMaxWidth","maxWidth","constructor","args","column","label","align","isExpandable","isSortable","isVisuallyHidden","key","tooltip","_setWidthValues","sortingFunction","originalWidth","setPxWidth","newPxWidth","minLimitedPxWidth","Math","max","min","n","action","onPreviousColumnWidthRestored","restoredWidth","imposedWidthDelta","onNextColumnWidthRestored","restoreWidth"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"column.js","sources":["../../../../../src/components/hds/advanced-table/models/column.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\n\nimport type HdsAdvancedTableModel from './table.ts';\nimport type {\n HdsAdvancedTableHorizontalAlignment,\n HdsAdvancedTableColumn as HdsAdvancedTableColumnType,\n} from '../types';\n\nexport const DEFAULT_MIN_WIDTH = '150px';\nexport const DEFAULT_MAX_WIDTH = '800px';\n\nfunction isPxSize(value?: string): boolean {\n if (value === undefined) {\n return false;\n }\n\n return /^-?\\d+(\\.\\d+)?px$/.test(value);\n}\n\nfunction pxToNumber(pxString: string): number {\n return parseFloat(pxString.slice(0, -2));\n}\n\nexport default class HdsAdvancedTableColumn {\n @tracked label: string = '';\n @tracked align?: HdsAdvancedTableHorizontalAlignment = 'left';\n @tracked isExpandable?: boolean = false;\n @tracked isReorderable?: boolean = false;\n @tracked isSortable?: boolean = false;\n @tracked isVisuallyHidden?: boolean = false;\n @tracked key?: string = undefined;\n @tracked minWidth?: `${number}px` = DEFAULT_MIN_WIDTH;\n @tracked maxWidth?: `${number}px` = DEFAULT_MAX_WIDTH;\n @tracked tooltip?: string = undefined;\n @tracked width?: string = undefined;\n @tracked originalWidth?: string = undefined; // used to restore the width when resetting\n @tracked imposedWidthDelta: number = 0; // used to track the width change imposed by the previous column\n\n @tracked sortingFunction?: (a: unknown, b: unknown) => number = undefined;\n\n table: HdsAdvancedTableModel;\n\n get pxWidth(): number | undefined {\n if (isPxSize(this.width)) {\n return pxToNumber(this.width!);\n }\n }\n set pxWidth(value: number) {\n this.width = `${value}px`;\n }\n\n get pxMinWidth(): number | undefined {\n if (isPxSize(this.minWidth)) {\n return pxToNumber(this.minWidth!);\n }\n }\n\n get pxMaxWidth(): number | undefined {\n if (isPxSize(this.maxWidth)) {\n return pxToNumber(this.maxWidth!);\n }\n }\n\n get index(): number {\n const { columns } = this.table;\n\n if (columns.length === 0) {\n return -1;\n }\n\n return columns.findIndex((column) => column.key === this.key);\n }\n\n get isFirst(): boolean {\n return this.index === 0;\n }\n\n get isLast(): boolean {\n return this.index !== -1 && this.index === this.table.columns.length - 1;\n }\n\n get siblings(): {\n previous?: HdsAdvancedTableColumn;\n next?: HdsAdvancedTableColumn;\n } {\n const { index, table } = this;\n const { columns } = table;\n\n if (index === -1) {\n return {};\n }\n\n return {\n previous: this.isFirst ? undefined : columns[index - 1],\n next: this.isLast ? undefined : columns[index + 1],\n };\n }\n\n constructor(args: {\n column: HdsAdvancedTableColumnType;\n table: HdsAdvancedTableModel;\n }) {\n const { column, table } = args;\n\n // set reference to table model\n this.table = table;\n\n // set column properties\n this.label = column.label;\n this.align = column.align ?? 'left';\n this.isExpandable = 'isExpandable' in column ? column.isExpandable : false;\n this.isSortable = column.isSortable ?? false;\n this.isVisuallyHidden = column.isVisuallyHidden ?? false;\n this.key = column.key;\n this.tooltip = column.tooltip;\n this._setWidthValues(column);\n this.sortingFunction = column.sortingFunction;\n }\n\n private _setWidthValues({\n width,\n minWidth,\n maxWidth,\n }: HdsAdvancedTableColumnType): void {\n if (width === undefined) {\n return;\n }\n\n this.width = width;\n\n // capture the width at the time of instantiation so it can be restored\n this.originalWidth = width;\n\n this.minWidth = minWidth ?? DEFAULT_MIN_WIDTH;\n this.maxWidth = maxWidth ?? DEFAULT_MAX_WIDTH;\n }\n\n // Sets the column width in pixels, ensuring it respects the min and max width constraints.\n @action\n setPxWidth(newPxWidth: number): void {\n const pxMinWidth = this.pxMinWidth ?? 1;\n const minLimitedPxWidth = Math.max(newPxWidth, pxMinWidth);\n\n this.pxWidth =\n this.pxMaxWidth !== undefined\n ? Math.min(minLimitedPxWidth, this.pxMaxWidth)\n : minLimitedPxWidth;\n\n if (this.key === undefined) {\n return;\n }\n }\n\n // This method is called when the column width is changed by the previous column.\n @action\n onPreviousColumnWidthRestored(): void {\n const restoredWidth = (this.pxWidth ?? 0) + this.imposedWidthDelta;\n\n this.setPxWidth(restoredWidth);\n\n this.imposedWidthDelta = 0;\n }\n\n // This method is called when the next column width is restored.\n @action\n onNextColumnWidthRestored(imposedWidthDelta: number): void {\n this.setPxWidth((this.pxWidth ?? 0) - imposedWidthDelta);\n }\n\n @action\n restoreWidth(): void {\n this.width = this.originalWidth;\n this.imposedWidthDelta = 0;\n\n if (this.key === undefined) {\n return;\n }\n }\n}\n"],"names":["DEFAULT_MIN_WIDTH","DEFAULT_MAX_WIDTH","isPxSize","value","undefined","test","pxToNumber","pxString","parseFloat","slice","HdsAdvancedTableColumn","g","prototype","tracked","i","void 0","table","pxWidth","width","pxMinWidth","minWidth","pxMaxWidth","maxWidth","index","columns","length","findIndex","column","key","isFirst","isLast","siblings","previous","next","constructor","args","label","align","isExpandable","isSortable","isVisuallyHidden","tooltip","_setWidthValues","sortingFunction","originalWidth","setPxWidth","newPxWidth","minLimitedPxWidth","Math","max","min","n","action","onPreviousColumnWidthRestored","restoredWidth","imposedWidthDelta","onNextColumnWidthRestored","restoreWidth"],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ import { precompileTemplate } from '@ember/template-compilation';
|
|
|
5
5
|
import { g, i, n } from 'decorator-transforms/runtime';
|
|
6
6
|
import { setComponentTemplate } from '@ember/component';
|
|
7
7
|
|
|
8
|
-
var TEMPLATE = precompileTemplate("{{!\n Copyright (c) HashiCorp, Inc.\n SPDX-License-Identifier: MPL-2.0\n}}\n<Hds::Dropdown class=\"hds-advanced-table__th-context-menu\" @enableCollisionDetection={{true}} ...attributes as |D|>\n <D.ToggleIcon\n @icon=\"more-vertical\"\n @text=\"Additional actions for {{@column.label}}\"\n @hasChevron={{false}}\n @size=\"small\"\n />\n\n {{#each this._options as |option|}}\n <D.Interactive\n @icon={{option.icon}}\n data-test-context-option-key={{option.key}}\n {{on \"click\" (fn option.action @column
|
|
8
|
+
var TEMPLATE = precompileTemplate("{{!\n Copyright (c) HashiCorp, Inc.\n SPDX-License-Identifier: MPL-2.0\n}}\n<Hds::Dropdown class=\"hds-advanced-table__th-context-menu\" @enableCollisionDetection={{true}} ...attributes as |D|>\n <D.ToggleIcon\n @icon=\"more-vertical\"\n @text=\"Additional actions for {{@column.label}}\"\n @hasChevron={{false}}\n @size=\"small\"\n />\n\n {{#each this._options as |option|}}\n <D.Interactive\n @icon={{option.icon}}\n data-test-context-option-key={{option.key}}\n {{on \"click\" (fn option.action @column D.close)}}\n >\n {{option.label}}\n </D.Interactive>\n {{/each}}\n</Hds::Dropdown>");
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* Copyright (c) HashiCorp, Inc.
|
|
@@ -19,16 +19,20 @@ class HdsAdvancedTableThContextMenu extends Component {
|
|
|
19
19
|
#_element = (i(this, "_element"), void 0);
|
|
20
20
|
get _options() {
|
|
21
21
|
const {
|
|
22
|
+
column,
|
|
22
23
|
hasResizableColumns
|
|
23
24
|
} = this.args;
|
|
24
25
|
let options = [];
|
|
25
26
|
if (hasResizableColumns) {
|
|
27
|
+
if (!column.isLast) {
|
|
28
|
+
options = [...options, {
|
|
29
|
+
key: 'resize-column',
|
|
30
|
+
label: 'Resize column',
|
|
31
|
+
icon: 'resize-column',
|
|
32
|
+
action: this.resizeColumn.bind(this)
|
|
33
|
+
}];
|
|
34
|
+
}
|
|
26
35
|
options = [...options, {
|
|
27
|
-
key: 'resize-column',
|
|
28
|
-
label: 'Resize column',
|
|
29
|
-
icon: 'resize-column',
|
|
30
|
-
action: this.resizeColumn.bind(this)
|
|
31
|
-
}, {
|
|
32
36
|
key: 'reset-column-width',
|
|
33
37
|
label: 'Reset column width',
|
|
34
38
|
icon: 'rotate-ccw',
|
|
@@ -43,10 +47,14 @@ class HdsAdvancedTableThContextMenu extends Component {
|
|
|
43
47
|
static {
|
|
44
48
|
n(this.prototype, "resizeColumn", [action]);
|
|
45
49
|
}
|
|
46
|
-
resetColumnWidth(column,
|
|
50
|
+
resetColumnWidth(column, dropdownCloseCallback) {
|
|
47
51
|
const {
|
|
48
52
|
onColumnResize
|
|
49
53
|
} = this.args;
|
|
54
|
+
const {
|
|
55
|
+
previous: previousColumn,
|
|
56
|
+
next: nextColumn
|
|
57
|
+
} = column.siblings;
|
|
50
58
|
previousColumn?.onNextColumnWidthRestored(column.imposedWidthDelta);
|
|
51
59
|
nextColumn?.onPreviousColumnWidthRestored();
|
|
52
60
|
column.restoreWidth();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"th-context-menu.js","sources":["../../../../src/components/hds/advanced-table/th-context-menu.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nimport type HdsAdvancedTableColumn from './models/column.ts';\nimport type { HdsDropdownSignature } from '../dropdown/index.ts';\nimport type { HdsDropdownToggleIconSignature } from '../dropdown/toggle/icon.ts';\nimport type { HdsAdvancedTableSignature } from './index.ts';\nimport { tracked } from '@glimmer/tracking';\nimport type { HdsAdvancedTableThResizeHandleSignature } from './th-resize-handle.ts';\n\ninterface HdsAdvancedTableThContextMenuOption {\n key: string;\n label: string;\n icon: HdsDropdownToggleIconSignature['Args']['icon'];\n action: (\n column: HdsAdvancedTableColumn,\n
|
|
1
|
+
{"version":3,"file":"th-context-menu.js","sources":["../../../../src/components/hds/advanced-table/th-context-menu.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nimport type HdsAdvancedTableColumn from './models/column.ts';\nimport type { HdsDropdownSignature } from '../dropdown/index.ts';\nimport type { HdsDropdownToggleIconSignature } from '../dropdown/toggle/icon.ts';\nimport type { HdsAdvancedTableSignature } from './index.ts';\nimport { tracked } from '@glimmer/tracking';\nimport type { HdsAdvancedTableThResizeHandleSignature } from './th-resize-handle.ts';\n\ninterface HdsAdvancedTableThContextMenuOption {\n key: string;\n label: string;\n icon: HdsDropdownToggleIconSignature['Args']['icon'];\n action: (\n column: HdsAdvancedTableColumn,\n dropdownCloseCallback?: () => void\n ) => void;\n}\n\nexport interface HdsAdvancedTableThContextMenuSignature {\n Args: {\n column: HdsAdvancedTableColumn;\n hasResizableColumns?: boolean;\n resizeHandleElement?: HdsAdvancedTableThResizeHandleSignature['Element'];\n onColumnResize?: HdsAdvancedTableSignature['Args']['onColumnResize'];\n };\n Element: HdsDropdownSignature['Element'];\n}\n\nexport default class HdsAdvancedTableThContextMenu extends Component<HdsAdvancedTableThContextMenuSignature> {\n @tracked private _element!: HdsDropdownSignature['Element'];\n\n get _options(): HdsAdvancedTableThContextMenuOption[] {\n const { column, hasResizableColumns } = this.args;\n\n let options: HdsAdvancedTableThContextMenuOption[] = [];\n\n if (hasResizableColumns) {\n if (!column.isLast) {\n options = [\n ...options,\n {\n key: 'resize-column',\n label: 'Resize column',\n icon: 'resize-column',\n action: this.resizeColumn.bind(this),\n },\n ];\n }\n\n options = [\n ...options,\n {\n key: 'reset-column-width',\n label: 'Reset column width',\n icon: 'rotate-ccw',\n action: this.resetColumnWidth.bind(this),\n },\n ];\n }\n\n return options;\n }\n\n @action\n resizeColumn() {\n this.args.resizeHandleElement?.focus();\n }\n\n @action\n resetColumnWidth(\n column: HdsAdvancedTableColumn,\n dropdownCloseCallback?: () => void\n ): void {\n const { onColumnResize } = this.args;\n\n const { previous: previousColumn, next: nextColumn } = column.siblings;\n\n previousColumn?.onNextColumnWidthRestored(column.imposedWidthDelta);\n nextColumn?.onPreviousColumnWidthRestored();\n column.restoreWidth();\n\n if (typeof onColumnResize === 'function' && column.key !== undefined) {\n onColumnResize(column.key, column.width);\n }\n\n dropdownCloseCallback?.();\n }\n}\n"],"names":["HdsAdvancedTableThContextMenu","Component","g","prototype","tracked","i","void 0","_options","column","hasResizableColumns","args","options","isLast","key","label","icon","action","resizeColumn","bind","resetColumnWidth","resizeHandleElement","focus","n","dropdownCloseCallback","onColumnResize","previous","previousColumn","next","nextColumn","siblings","onNextColumnWidthRestored","imposedWidthDelta","onPreviousColumnWidthRestored","restoreWidth","undefined","width","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA;;AAgCe,MAAMA,6BAA6B,SAASC,SAAS,CAAyC;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,UAAA,EAAA,CAC1GC,OAAO,CAAA,CAAA;AAAA;AAAA,EAAA,SAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,UAAA,CAAA,EAAAC,MAAA;EAER,IAAIC,QAAQA,GAA0C;IACpD,MAAM;MAAEC,MAAM;AAAEC,MAAAA;KAAqB,GAAG,IAAI,CAACC,IAAI;IAEjD,IAAIC,OAA8C,GAAG,EAAE;AAEvD,IAAA,IAAIF,mBAAmB,EAAE;AACvB,MAAA,IAAI,CAACD,MAAM,CAACI,MAAM,EAAE;AAClBD,QAAAA,OAAO,GAAG,CACR,GAAGA,OAAO,EACV;AACEE,UAAAA,GAAG,EAAE,eAAe;AACpBC,UAAAA,KAAK,EAAE,eAAe;AACtBC,UAAAA,IAAI,EAAE,eAAe;AACrBC,UAAAA,MAAM,EAAE,IAAI,CAACC,YAAY,CAACC,IAAI,CAAC,IAAI;AACrC,SAAC,CACF;AACH;AAEAP,MAAAA,OAAO,GAAG,CACR,GAAGA,OAAO,EACV;AACEE,QAAAA,GAAG,EAAE,oBAAoB;AACzBC,QAAAA,KAAK,EAAE,oBAAoB;AAC3BC,QAAAA,IAAI,EAAE,YAAY;AAClBC,QAAAA,MAAM,EAAE,IAAI,CAACG,gBAAgB,CAACD,IAAI,CAAC,IAAI;AACzC,OAAC,CACF;AACH;AAEA,IAAA,OAAOP,OAAO;AAChB;AAGAM,EAAAA,YAAYA,GAAG;AACb,IAAA,IAAI,CAACP,IAAI,CAACU,mBAAmB,EAAEC,KAAK,EAAE;AACxC;AAAC,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAnB,SAAA,EAAA,cAAA,EAAA,CAHAa,MAAM,CAAA,CAAA;AAAA;AAMPG,EAAAA,gBAAgBA,CACdX,MAA8B,EAC9Be,qBAAkC,EAC5B;IACN,MAAM;AAAEC,MAAAA;KAAgB,GAAG,IAAI,CAACd,IAAI;IAEpC,MAAM;AAAEe,MAAAA,QAAQ,EAAEC,cAAc;AAAEC,MAAAA,IAAI,EAAEC;KAAY,GAAGpB,MAAM,CAACqB,QAAQ;AAEtEH,IAAAA,cAAc,EAAEI,yBAAyB,CAACtB,MAAM,CAACuB,iBAAiB,CAAC;IACnEH,UAAU,EAAEI,6BAA6B,EAAE;IAC3CxB,MAAM,CAACyB,YAAY,EAAE;IAErB,IAAI,OAAOT,cAAc,KAAK,UAAU,IAAIhB,MAAM,CAACK,GAAG,KAAKqB,SAAS,EAAE;MACpEV,cAAc,CAAChB,MAAM,CAACK,GAAG,EAAEL,MAAM,CAAC2B,KAAK,CAAC;AAC1C;AAEAZ,IAAAA,qBAAqB,IAAI;AAC3B;AAAC,EAAA;IAAAD,CAAA,CAAA,IAAA,CAAAnB,SAAA,EAAA,kBAAA,EAAA,CAlBAa,MAAM,CAAA,CAAA;AAAA;AAmBT;AAACoB,oBAAA,CAAAC,QAAA,EA3DoBrC,6BAA6B,CAAA;;;;"}
|
|
@@ -97,9 +97,11 @@ class HdsAdvancedTableThResizeHandle extends Component {
|
|
|
97
97
|
event.preventDefault();
|
|
98
98
|
event.stopPropagation();
|
|
99
99
|
const {
|
|
100
|
-
column
|
|
101
|
-
nextColumn
|
|
100
|
+
column
|
|
102
101
|
} = this.args;
|
|
102
|
+
const {
|
|
103
|
+
next: nextColumn
|
|
104
|
+
} = column.siblings;
|
|
103
105
|
const currentColumnPxWidth = column.pxWidth;
|
|
104
106
|
const currentNextColumnPxWidth = nextColumn?.pxWidth;
|
|
105
107
|
let deltaX = 0;
|
|
@@ -128,9 +130,11 @@ class HdsAdvancedTableThResizeHandle extends Component {
|
|
|
128
130
|
event.preventDefault();
|
|
129
131
|
event.stopPropagation();
|
|
130
132
|
const {
|
|
131
|
-
column
|
|
132
|
-
nextColumn
|
|
133
|
+
column
|
|
133
134
|
} = this.args;
|
|
135
|
+
const {
|
|
136
|
+
next: nextColumn
|
|
137
|
+
} = column.siblings;
|
|
134
138
|
this.resizing = {
|
|
135
139
|
startX: event.clientX,
|
|
136
140
|
startColumnPxWidth: column.pxWidth ?? 0,
|
|
@@ -163,9 +167,11 @@ class HdsAdvancedTableThResizeHandle extends Component {
|
|
|
163
167
|
}
|
|
164
168
|
event.preventDefault();
|
|
165
169
|
const {
|
|
166
|
-
column
|
|
167
|
-
nextColumn
|
|
170
|
+
column
|
|
168
171
|
} = this.args;
|
|
172
|
+
const {
|
|
173
|
+
next: nextColumn
|
|
174
|
+
} = column.siblings;
|
|
169
175
|
const {
|
|
170
176
|
startX,
|
|
171
177
|
startColumnPxWidth,
|
|
@@ -181,9 +187,11 @@ class HdsAdvancedTableThResizeHandle extends Component {
|
|
|
181
187
|
window.removeEventListener('pointermove', this._boundResize);
|
|
182
188
|
window.removeEventListener('pointerup', this._boundStopResize);
|
|
183
189
|
const {
|
|
184
|
-
column
|
|
185
|
-
nextColumn
|
|
190
|
+
column
|
|
186
191
|
} = this.args;
|
|
192
|
+
const {
|
|
193
|
+
next: nextColumn
|
|
194
|
+
} = column.siblings;
|
|
187
195
|
this._setNextColumnImposedWidthDelta(nextColumn, this._nextColumnDelta);
|
|
188
196
|
this.onColumnResize(column.key, column.width);
|
|
189
197
|
this.resizing = null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"th-resize-handle.js","sources":["../../../../src/components/hds/advanced-table/th-resize-handle.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { modifier } from 'ember-modifier';\n\nimport type HdsAdvancedTableColumn from './models/column.ts';\nimport type { HdsAdvancedTableSignature } from './index.ts';\n\nconst TABLE_BORDER_WIDTH = 1;\nconst KEYBOARD_RESIZE_STEP = 10;\n\nfunction calculateEffectiveDelta(\n deltaX: number,\n col: HdsAdvancedTableColumn,\n startColW: number,\n nextCol: HdsAdvancedTableColumn,\n startNextColW: number\n): number {\n const colMin = col.pxMinWidth ?? 0;\n const colMax = col.pxMaxWidth ?? Infinity;\n const nextMin = nextCol.pxMinWidth ?? 0;\n const nextMax = nextCol.pxMaxWidth ?? Infinity;\n\n let effectiveDelta = 0;\n\n // expanding col, shrinking nextCol\n if (deltaX > 0) {\n const maxCanExpandCol = colMax - startColW;\n const maxCanShrinkNext = startNextColW - nextMin;\n\n effectiveDelta = Math.min(deltaX, maxCanExpandCol, maxCanShrinkNext);\n effectiveDelta = Math.max(0, effectiveDelta);\n }\n // shrinking col, expanding nextCol\n else if (deltaX < 0) {\n const absDeltaX = -deltaX;\n const maxCanShrinkCol = startColW - colMin;\n const maxCanExpandNext = nextMax - startNextColW;\n\n effectiveDelta = -Math.min(absDeltaX, maxCanShrinkCol, maxCanExpandNext);\n effectiveDelta = Math.min(0, effectiveDelta);\n }\n\n return effectiveDelta;\n}\n\nexport interface HdsAdvancedTableThResizeHandleSignature {\n Args: {\n column: HdsAdvancedTableColumn;\n nextColumn?: HdsAdvancedTableColumn;\n hasResizableColumns: HdsAdvancedTableSignature['Args']['hasResizableColumns'];\n tableHeight?: number;\n onColumnResize?: HdsAdvancedTableSignature['Args']['onColumnResize'];\n };\n Blocks: {\n default?: [];\n };\n Element: HTMLDivElement;\n}\n\nexport default class HdsAdvancedTableThResizeHandle extends Component<HdsAdvancedTableThResizeHandleSignature> {\n @tracked resizing: {\n startX: number;\n startColumnPxWidth: number;\n startNextColumnPxWidth?: number;\n } | null = null;\n @tracked private _nextColumnDelta: number = 0;\n\n private _handleElement!: HdsAdvancedTableThResizeHandleSignature['Element'];\n private _boundResize: (event: PointerEvent) => void;\n private _boundStopResize: () => void;\n\n private _registerHandleElement = modifier(\n (element: HdsAdvancedTableThResizeHandleSignature['Element']) => {\n this._handleElement = element;\n }\n );\n\n constructor(\n owner: unknown,\n args: HdsAdvancedTableThResizeHandleSignature['Args']\n ) {\n super(owner, args);\n\n this._boundResize = this._resize.bind(this);\n this._boundStopResize = this._stopResize.bind(this);\n }\n\n get height(): string | undefined {\n const { tableHeight } = this.args;\n\n if (tableHeight === undefined) {\n return;\n }\n\n return `${tableHeight - TABLE_BORDER_WIDTH * 2}px`;\n }\n\n get classNames(): string {\n const classes = ['hds-advanced-table__th-resize-handle'];\n\n if (this.resizing !== null) {\n classes.push('hds-advanced-table__th-resize-handle--resizing');\n }\n\n return classes.join(' ');\n }\n\n @action\n onColumnResize(key?: string, width?: string): void {\n const { onColumnResize } = this.args;\n\n if (typeof onColumnResize === 'function' && key !== undefined) {\n onColumnResize(key, width);\n }\n }\n\n @action\n handleKeydown(event: KeyboardEvent): void {\n if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n const { column, nextColumn } = this.args;\n\n const currentColumnPxWidth = column.pxWidth;\n const currentNextColumnPxWidth = nextColumn?.pxWidth;\n\n let deltaX = 0;\n if (event.key === 'ArrowLeft') {\n deltaX = -KEYBOARD_RESIZE_STEP;\n } else if (event.key === 'ArrowRight') {\n deltaX = KEYBOARD_RESIZE_STEP;\n }\n\n if (deltaX === 0) return;\n\n this._applyResizeDelta(\n deltaX,\n column,\n currentColumnPxWidth ?? 0, // Current width before keyboard step\n nextColumn,\n currentNextColumnPxWidth ?? 0 // Current next col width before keyboard step\n );\n\n this._setNextColumnImposedWidthDelta(nextColumn, this._nextColumnDelta);\n\n this.onColumnResize(column.key, column.width);\n\n this._handleElement.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'nearest',\n });\n }\n\n @action\n startResize(event: PointerEvent): void {\n event.preventDefault();\n event.stopPropagation();\n\n const { column, nextColumn } = this.args;\n\n this.resizing = {\n startX: event.clientX,\n startColumnPxWidth: column.pxWidth ?? 0,\n startNextColumnPxWidth: nextColumn?.pxWidth ?? 0,\n };\n\n window.addEventListener('pointermove', this._boundResize);\n window.addEventListener('pointerup', this._boundStopResize);\n }\n\n private _applyResizeDelta(\n deltaX: number,\n column: HdsAdvancedTableColumn,\n startColumnPxWidth: number,\n nextColumn?: HdsAdvancedTableColumn,\n startNextColumnPxWidth?: number\n ): void {\n const canResizeNeighbor =\n nextColumn !== undefined && startNextColumnPxWidth !== undefined;\n\n if (canResizeNeighbor) {\n const effectiveDelta = calculateEffectiveDelta(\n deltaX,\n column,\n startColumnPxWidth,\n nextColumn,\n startNextColumnPxWidth\n );\n\n column.setPxWidth(startColumnPxWidth + effectiveDelta);\n\n // the actual new column width may differ from the intended width due to min/max constraints.\n const actualNewColumnWidth = column.pxWidth ?? startColumnPxWidth;\n const actualAppliedDelta = actualNewColumnWidth - startColumnPxWidth;\n\n nextColumn.setPxWidth(startNextColumnPxWidth - actualAppliedDelta);\n this._nextColumnDelta = actualAppliedDelta;\n } else {\n column.setPxWidth(startColumnPxWidth + deltaX);\n }\n }\n\n private _resize(event: PointerEvent): void {\n if (this.resizing === null) {\n return;\n }\n\n event.preventDefault();\n\n const { column, nextColumn } = this.args;\n const { startX, startColumnPxWidth, startNextColumnPxWidth } =\n this.resizing;\n const deltaX = event.clientX - startX;\n\n this._applyResizeDelta(\n deltaX,\n column,\n startColumnPxWidth, // Width at the start of the drag\n nextColumn,\n startNextColumnPxWidth // Width of next col at the start of the drag\n );\n }\n\n private _stopResize(): void {\n window.removeEventListener('pointermove', this._boundResize);\n window.removeEventListener('pointerup', this._boundStopResize);\n\n const { column, nextColumn } = this.args;\n\n this._setNextColumnImposedWidthDelta(nextColumn, this._nextColumnDelta);\n\n this.onColumnResize(column.key, column.width);\n\n this.resizing = null;\n }\n\n private _setNextColumnImposedWidthDelta(\n nextColumn: HdsAdvancedTableColumn | undefined,\n delta: number\n ): void {\n if (nextColumn === undefined) {\n return;\n }\n\n nextColumn.imposedWidthDelta = (nextColumn.imposedWidthDelta ?? 0) + delta;\n\n this._nextColumnDelta = 0;\n }\n}\n"],"names":["TABLE_BORDER_WIDTH","KEYBOARD_RESIZE_STEP","calculateEffectiveDelta","deltaX","col","startColW","nextCol","startNextColW","colMin","pxMinWidth","colMax","pxMaxWidth","Infinity","nextMin","nextMax","effectiveDelta","maxCanExpandCol","maxCanShrinkNext","Math","min","max","absDeltaX","maxCanShrinkCol","maxCanExpandNext","HdsAdvancedTableThResizeHandle","Component","g","prototype","tracked","i","void 0","_handleElement","_boundResize","_boundStopResize","_registerHandleElement","modifier","element","constructor","owner","args","_resize","bind","_stopResize","height","tableHeight","undefined","classNames","classes","resizing","push","join","onColumnResize","key","width","n","action","handleKeydown","event","preventDefault","stopPropagation","column","nextColumn","currentColumnPxWidth","pxWidth","currentNextColumnPxWidth","_applyResizeDelta","_setNextColumnImposedWidthDelta","_nextColumnDelta","scrollIntoView","behavior","block","inline","startResize","startX","clientX","startColumnPxWidth","startNextColumnPxWidth","window","addEventListener","canResizeNeighbor","setPxWidth","actualNewColumnWidth","actualAppliedDelta","removeEventListener","delta","imposedWidthDelta","setComponentTemplate","TEMPLATE"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"th-resize-handle.js","sources":["../../../../src/components/hds/advanced-table/th-resize-handle.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { modifier } from 'ember-modifier';\n\nimport type HdsAdvancedTableColumn from './models/column.ts';\nimport type { HdsAdvancedTableSignature } from './index.ts';\n\nconst TABLE_BORDER_WIDTH = 1;\nconst KEYBOARD_RESIZE_STEP = 10;\n\nfunction calculateEffectiveDelta(\n deltaX: number,\n col: HdsAdvancedTableColumn,\n startColW: number,\n nextCol: HdsAdvancedTableColumn,\n startNextColW: number\n): number {\n const colMin = col.pxMinWidth ?? 0;\n const colMax = col.pxMaxWidth ?? Infinity;\n const nextMin = nextCol.pxMinWidth ?? 0;\n const nextMax = nextCol.pxMaxWidth ?? Infinity;\n\n let effectiveDelta = 0;\n\n // expanding col, shrinking nextCol\n if (deltaX > 0) {\n const maxCanExpandCol = colMax - startColW;\n const maxCanShrinkNext = startNextColW - nextMin;\n\n effectiveDelta = Math.min(deltaX, maxCanExpandCol, maxCanShrinkNext);\n effectiveDelta = Math.max(0, effectiveDelta);\n }\n // shrinking col, expanding nextCol\n else if (deltaX < 0) {\n const absDeltaX = -deltaX;\n const maxCanShrinkCol = startColW - colMin;\n const maxCanExpandNext = nextMax - startNextColW;\n\n effectiveDelta = -Math.min(absDeltaX, maxCanShrinkCol, maxCanExpandNext);\n effectiveDelta = Math.min(0, effectiveDelta);\n }\n\n return effectiveDelta;\n}\n\nexport interface HdsAdvancedTableThResizeHandleSignature {\n Args: {\n column: HdsAdvancedTableColumn;\n hasResizableColumns: HdsAdvancedTableSignature['Args']['hasResizableColumns'];\n tableHeight?: number;\n onColumnResize?: HdsAdvancedTableSignature['Args']['onColumnResize'];\n };\n Blocks: {\n default?: [];\n };\n Element: HTMLDivElement;\n}\n\nexport default class HdsAdvancedTableThResizeHandle extends Component<HdsAdvancedTableThResizeHandleSignature> {\n @tracked resizing: {\n startX: number;\n startColumnPxWidth: number;\n startNextColumnPxWidth?: number;\n } | null = null;\n @tracked private _nextColumnDelta: number = 0;\n\n private _handleElement!: HdsAdvancedTableThResizeHandleSignature['Element'];\n private _boundResize: (event: PointerEvent) => void;\n private _boundStopResize: () => void;\n\n private _registerHandleElement = modifier(\n (element: HdsAdvancedTableThResizeHandleSignature['Element']) => {\n this._handleElement = element;\n }\n );\n\n constructor(\n owner: unknown,\n args: HdsAdvancedTableThResizeHandleSignature['Args']\n ) {\n super(owner, args);\n\n this._boundResize = this._resize.bind(this);\n this._boundStopResize = this._stopResize.bind(this);\n }\n\n get height(): string | undefined {\n const { tableHeight } = this.args;\n\n if (tableHeight === undefined) {\n return;\n }\n\n return `${tableHeight - TABLE_BORDER_WIDTH * 2}px`;\n }\n\n get classNames(): string {\n const classes = ['hds-advanced-table__th-resize-handle'];\n\n if (this.resizing !== null) {\n classes.push('hds-advanced-table__th-resize-handle--resizing');\n }\n\n return classes.join(' ');\n }\n\n @action\n onColumnResize(key?: string, width?: string): void {\n const { onColumnResize } = this.args;\n\n if (typeof onColumnResize === 'function' && key !== undefined) {\n onColumnResize(key, width);\n }\n }\n\n @action\n handleKeydown(event: KeyboardEvent): void {\n if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n const { column } = this.args;\n const { next: nextColumn } = column.siblings;\n\n const currentColumnPxWidth = column.pxWidth;\n const currentNextColumnPxWidth = nextColumn?.pxWidth;\n\n let deltaX = 0;\n if (event.key === 'ArrowLeft') {\n deltaX = -KEYBOARD_RESIZE_STEP;\n } else if (event.key === 'ArrowRight') {\n deltaX = KEYBOARD_RESIZE_STEP;\n }\n\n if (deltaX === 0) return;\n\n this._applyResizeDelta(\n deltaX,\n column,\n currentColumnPxWidth ?? 0, // Current width before keyboard step\n nextColumn,\n currentNextColumnPxWidth ?? 0 // Current next col width before keyboard step\n );\n\n this._setNextColumnImposedWidthDelta(nextColumn, this._nextColumnDelta);\n\n this.onColumnResize(column.key, column.width);\n\n this._handleElement.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n inline: 'nearest',\n });\n }\n\n @action\n startResize(event: PointerEvent): void {\n event.preventDefault();\n event.stopPropagation();\n\n const { column } = this.args;\n const { next: nextColumn } = column.siblings;\n\n this.resizing = {\n startX: event.clientX,\n startColumnPxWidth: column.pxWidth ?? 0,\n startNextColumnPxWidth: nextColumn?.pxWidth ?? 0,\n };\n\n window.addEventListener('pointermove', this._boundResize);\n window.addEventListener('pointerup', this._boundStopResize);\n }\n\n private _applyResizeDelta(\n deltaX: number,\n column: HdsAdvancedTableColumn,\n startColumnPxWidth: number,\n nextColumn?: HdsAdvancedTableColumn,\n startNextColumnPxWidth?: number\n ): void {\n const canResizeNeighbor =\n nextColumn !== undefined && startNextColumnPxWidth !== undefined;\n\n if (canResizeNeighbor) {\n const effectiveDelta = calculateEffectiveDelta(\n deltaX,\n column,\n startColumnPxWidth,\n nextColumn,\n startNextColumnPxWidth\n );\n\n column.setPxWidth(startColumnPxWidth + effectiveDelta);\n\n // the actual new column width may differ from the intended width due to min/max constraints.\n const actualNewColumnWidth = column.pxWidth ?? startColumnPxWidth;\n const actualAppliedDelta = actualNewColumnWidth - startColumnPxWidth;\n\n nextColumn.setPxWidth(startNextColumnPxWidth - actualAppliedDelta);\n this._nextColumnDelta = actualAppliedDelta;\n } else {\n column.setPxWidth(startColumnPxWidth + deltaX);\n }\n }\n\n private _resize(event: PointerEvent): void {\n if (this.resizing === null) {\n return;\n }\n\n event.preventDefault();\n\n const { column } = this.args;\n const { next: nextColumn } = column.siblings;\n const { startX, startColumnPxWidth, startNextColumnPxWidth } =\n this.resizing;\n const deltaX = event.clientX - startX;\n\n this._applyResizeDelta(\n deltaX,\n column,\n startColumnPxWidth, // Width at the start of the drag\n nextColumn,\n startNextColumnPxWidth // Width of next col at the start of the drag\n );\n }\n\n private _stopResize(): void {\n window.removeEventListener('pointermove', this._boundResize);\n window.removeEventListener('pointerup', this._boundStopResize);\n\n const { column } = this.args;\n const { next: nextColumn } = column.siblings;\n\n this._setNextColumnImposedWidthDelta(nextColumn, this._nextColumnDelta);\n\n this.onColumnResize(column.key, column.width);\n\n this.resizing = null;\n }\n\n private _setNextColumnImposedWidthDelta(\n nextColumn: HdsAdvancedTableColumn | undefined,\n delta: number\n ): void {\n if (nextColumn === undefined) {\n return;\n }\n\n nextColumn.imposedWidthDelta = (nextColumn.imposedWidthDelta ?? 0) + delta;\n\n this._nextColumnDelta = 0;\n }\n}\n"],"names":["TABLE_BORDER_WIDTH","KEYBOARD_RESIZE_STEP","calculateEffectiveDelta","deltaX","col","startColW","nextCol","startNextColW","colMin","pxMinWidth","colMax","pxMaxWidth","Infinity","nextMin","nextMax","effectiveDelta","maxCanExpandCol","maxCanShrinkNext","Math","min","max","absDeltaX","maxCanShrinkCol","maxCanExpandNext","HdsAdvancedTableThResizeHandle","Component","g","prototype","tracked","i","void 0","_handleElement","_boundResize","_boundStopResize","_registerHandleElement","modifier","element","constructor","owner","args","_resize","bind","_stopResize","height","tableHeight","undefined","classNames","classes","resizing","push","join","onColumnResize","key","width","n","action","handleKeydown","event","preventDefault","stopPropagation","column","next","nextColumn","siblings","currentColumnPxWidth","pxWidth","currentNextColumnPxWidth","_applyResizeDelta","_setNextColumnImposedWidthDelta","_nextColumnDelta","scrollIntoView","behavior","block","inline","startResize","startX","clientX","startColumnPxWidth","startNextColumnPxWidth","window","addEventListener","canResizeNeighbor","setPxWidth","actualNewColumnWidth","actualAppliedDelta","removeEventListener","delta","imposedWidthDelta","setComponentTemplate","TEMPLATE"],"mappings":"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"}
|