@momentum-design/components 0.16.17 → 0.16.19

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.
@@ -0,0 +1,8 @@
1
+ import Link from './link.component';
2
+ import '../icon';
3
+ declare global {
4
+ interface HTMLElementTagNameMap {
5
+ ['mdc-link']: Link;
6
+ }
7
+ }
8
+ export default Link;
@@ -0,0 +1,5 @@
1
+ import Link from './link.component';
2
+ import { TAG_NAME } from './link.constants';
3
+ import '../icon';
4
+ Link.register(TAG_NAME);
5
+ export default Link;
@@ -0,0 +1,90 @@
1
+ import { CSSResult, PropertyValueMap } from 'lit';
2
+ import { Component } from '../../models';
3
+ import { LinkSize } from './link.types';
4
+ import { IconNames } from '../icon/icon.types';
5
+ declare const Link_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
6
+ /**
7
+ * `mdc-link` component can be used to navigate to a different page
8
+ * within the application or to an external site. It can be used to link to
9
+ * emails or phone numbers.
10
+ *
11
+ * The `children` of the link component is expected to be an anchor element
12
+ * containing the text, href, and other attributes.
13
+ *
14
+ * For `icon`, the `mdc-icon` component is used to render the icon.
15
+ *
16
+ * @dependency mdc-icon
17
+ *
18
+ * @tagname mdc-link
19
+ *
20
+ * @cssproperty --mdc-link-border-radius - Border radius of the link
21
+ * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state
22
+ * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state
23
+ * @cssproperty --mdc-link-color-hover - Text and icon color of the link in hover state
24
+ * @cssproperty --mdc-link-color-normal - Text and icon color of the link in normal state
25
+ * @cssproperty --mdc-link-icon-margin-left - Gap between the text and icon (only applicable when an icon is set)
26
+ * @cssproperty --mdc-link-inverted-color-active - Text and icon color of the inverted link in active state
27
+ * @cssproperty --mdc-link-inverted-color-disabled - Text and icon color of the inverted link in disabled state
28
+ * @cssproperty --mdc-link-inverted-color-hover - Text and icon color of the inverted link in hover state
29
+ * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state
30
+ * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants
31
+ */
32
+ declare class Link extends Link_base {
33
+ /**
34
+ * Name of the icon (= filename) to be used as trailing icon for link.
35
+ *
36
+ * If no `icon` is provided, no icon will be rendered.
37
+ */
38
+ iconName?: IconNames;
39
+ /**
40
+ * The link can be inline or standalone.
41
+ * @default false
42
+ */
43
+ inline: boolean;
44
+ /**
45
+ * The link color can be inverted by setting the inverted attribute to true.
46
+ * @default false
47
+ */
48
+ inverted: boolean;
49
+ /**
50
+ * Size of the link.
51
+ * Acceptable values include:
52
+ *
53
+ * - 'small'
54
+ * - 'midsize'
55
+ * - 'large'
56
+ *
57
+ * @default large
58
+ */
59
+ size: LinkSize;
60
+ /**
61
+ * Used to store the previous tabindex value of the host element
62
+ * null value means that the host element did not have a tabindex attribute.
63
+ * @internal
64
+ */
65
+ private prevTabindex;
66
+ /**
67
+ * Method to get the size of the trailing icon based on the link size.
68
+ * @returns The icon size value and units.
69
+ */
70
+ private getIconSize;
71
+ /**
72
+ * Updates the tabindex of the host element to disable or enable the link.
73
+ * When disabled, the link is not focusable or clickable, and tabindex is set to -1
74
+ * and aria-disabled attribute is set to true
75
+ * When link is not disabled, the previous tabindex of the host element is restored
76
+ * and aria-disabled attribute is removed.
77
+ *
78
+ * @param disabled - The disabled state of icon
79
+ */
80
+ private setDisabled;
81
+ /**
82
+ * Method to create and append trailing icon to the first anchor element in the slot.
83
+ * If no icon name is provided, no icon will be rendered.
84
+ */
85
+ private updateTrailingIcon;
86
+ update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
87
+ render(): import("lit-html").TemplateResult<1>;
88
+ static styles: Array<CSSResult>;
89
+ }
90
+ export default Link;
@@ -0,0 +1,154 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ var __metadata = (this && this.__metadata) || function (k, v) {
8
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
+ };
10
+ import { html } from 'lit';
11
+ import { property } from 'lit/decorators.js';
12
+ import { Component } from '../../models';
13
+ import { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES } from './link.constants';
14
+ import styles from './link.styles';
15
+ import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
16
+ /**
17
+ * `mdc-link` component can be used to navigate to a different page
18
+ * within the application or to an external site. It can be used to link to
19
+ * emails or phone numbers.
20
+ *
21
+ * The `children` of the link component is expected to be an anchor element
22
+ * containing the text, href, and other attributes.
23
+ *
24
+ * For `icon`, the `mdc-icon` component is used to render the icon.
25
+ *
26
+ * @dependency mdc-icon
27
+ *
28
+ * @tagname mdc-link
29
+ *
30
+ * @cssproperty --mdc-link-border-radius - Border radius of the link
31
+ * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state
32
+ * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state
33
+ * @cssproperty --mdc-link-color-hover - Text and icon color of the link in hover state
34
+ * @cssproperty --mdc-link-color-normal - Text and icon color of the link in normal state
35
+ * @cssproperty --mdc-link-icon-margin-left - Gap between the text and icon (only applicable when an icon is set)
36
+ * @cssproperty --mdc-link-inverted-color-active - Text and icon color of the inverted link in active state
37
+ * @cssproperty --mdc-link-inverted-color-disabled - Text and icon color of the inverted link in disabled state
38
+ * @cssproperty --mdc-link-inverted-color-hover - Text and icon color of the inverted link in hover state
39
+ * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state
40
+ * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants
41
+ */
42
+ class Link extends DisabledMixin(Component) {
43
+ constructor() {
44
+ super(...arguments);
45
+ /**
46
+ * The link can be inline or standalone.
47
+ * @default false
48
+ */
49
+ this.inline = DEFAULTS.INLINE;
50
+ /**
51
+ * The link color can be inverted by setting the inverted attribute to true.
52
+ * @default false
53
+ */
54
+ this.inverted = DEFAULTS.INVERTED;
55
+ /**
56
+ * Size of the link.
57
+ * Acceptable values include:
58
+ *
59
+ * - 'small'
60
+ * - 'midsize'
61
+ * - 'large'
62
+ *
63
+ * @default large
64
+ */
65
+ this.size = DEFAULTS.LINK_SIZE;
66
+ /**
67
+ * Used to store the previous tabindex value of the host element
68
+ * null value means that the host element did not have a tabindex attribute.
69
+ * @internal
70
+ */
71
+ this.prevTabindex = null;
72
+ }
73
+ /**
74
+ * Method to get the size of the trailing icon based on the link size.
75
+ * @returns The icon size value and units.
76
+ */
77
+ getIconSize() {
78
+ switch (this.size) {
79
+ case LINK_SIZES.SMALL:
80
+ return LINK_ICON_SIZES.SMALL;
81
+ case LINK_SIZES.MIDSIZE:
82
+ return LINK_ICON_SIZES.MIDSIZE;
83
+ default:
84
+ return LINK_ICON_SIZES.LARGE;
85
+ }
86
+ }
87
+ /**
88
+ * Updates the tabindex of the host element to disable or enable the link.
89
+ * When disabled, the link is not focusable or clickable, and tabindex is set to -1
90
+ * and aria-disabled attribute is set to true
91
+ * When link is not disabled, the previous tabindex of the host element is restored
92
+ * and aria-disabled attribute is removed.
93
+ *
94
+ * @param disabled - The disabled state of icon
95
+ */
96
+ setDisabled(disabled) {
97
+ if (disabled) {
98
+ this.prevTabindex = this.hasAttribute('tabindex') ? this.tabIndex : null;
99
+ this.tabIndex = -1;
100
+ this.setAttribute('aria-disabled', 'true');
101
+ }
102
+ else if (this.prevTabindex === null) {
103
+ this.removeAttribute('tabindex');
104
+ this.removeAttribute('aria-disabled');
105
+ }
106
+ else {
107
+ this.tabIndex = this.prevTabindex;
108
+ this.removeAttribute('aria-disabled');
109
+ }
110
+ }
111
+ /**
112
+ * Method to create and append trailing icon to the first anchor element in the slot.
113
+ * If no icon name is provided, no icon will be rendered.
114
+ */
115
+ updateTrailingIcon() {
116
+ var _a, _b;
117
+ const anchorElement = (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedElements({ flatten: true }).find((element) => element.tagName === 'A');
118
+ const iconSize = this.getIconSize();
119
+ if (this.iconName && anchorElement) {
120
+ const trailingIcon = document.createElement('mdc-icon');
121
+ trailingIcon.setAttribute('name', this.iconName);
122
+ trailingIcon.setAttribute('size', `${iconSize}`);
123
+ trailingIcon.setAttribute('length-unit', 'rem');
124
+ anchorElement.appendChild(trailingIcon);
125
+ }
126
+ }
127
+ update(changedProperties) {
128
+ super.update(changedProperties);
129
+ if (changedProperties.has('disabled')) {
130
+ this.setDisabled(this.disabled);
131
+ }
132
+ }
133
+ render() {
134
+ return html `<slot @slotchange=${this.updateTrailingIcon}></slot>`;
135
+ }
136
+ }
137
+ Link.styles = [...Component.styles, ...styles];
138
+ __decorate([
139
+ property({ type: String, attribute: 'icon-name' }),
140
+ __metadata("design:type", String)
141
+ ], Link.prototype, "iconName", void 0);
142
+ __decorate([
143
+ property({ type: Boolean, reflect: true }),
144
+ __metadata("design:type", Boolean)
145
+ ], Link.prototype, "inline", void 0);
146
+ __decorate([
147
+ property({ type: Boolean, reflect: true }),
148
+ __metadata("design:type", Boolean)
149
+ ], Link.prototype, "inverted", void 0);
150
+ __decorate([
151
+ property({ type: String, reflect: true }),
152
+ __metadata("design:type", String)
153
+ ], Link.prototype, "size", void 0);
154
+ export default Link;
@@ -0,0 +1,17 @@
1
+ declare const TAG_NAME: "mdc-link";
2
+ declare const LINK_SIZES: {
3
+ readonly LARGE: "large";
4
+ readonly MIDSIZE: "midsize";
5
+ readonly SMALL: "small";
6
+ };
7
+ declare const LINK_ICON_SIZES: {
8
+ readonly LARGE: 1;
9
+ readonly MIDSIZE: 0.875;
10
+ readonly SMALL: 0.75;
11
+ };
12
+ declare const DEFAULTS: {
13
+ INLINE: boolean;
14
+ INVERTED: boolean;
15
+ LINK_SIZE: "large";
16
+ };
17
+ export { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES, TAG_NAME, };
@@ -0,0 +1,18 @@
1
+ import utils from '../../utils/tag-name';
2
+ const TAG_NAME = utils.constructTagName('link');
3
+ const LINK_SIZES = {
4
+ LARGE: 'large',
5
+ MIDSIZE: 'midsize',
6
+ SMALL: 'small',
7
+ };
8
+ const LINK_ICON_SIZES = {
9
+ LARGE: 1,
10
+ MIDSIZE: 0.875,
11
+ SMALL: 0.75,
12
+ };
13
+ const DEFAULTS = {
14
+ INLINE: false,
15
+ INVERTED: false,
16
+ LINK_SIZE: LINK_SIZES.LARGE,
17
+ };
18
+ export { DEFAULTS, LINK_ICON_SIZES, LINK_SIZES, TAG_NAME, };
@@ -0,0 +1,2 @@
1
+ declare const styles: import("lit").CSSResult[];
2
+ export default styles;
@@ -0,0 +1,116 @@
1
+ import { css } from 'lit';
2
+ import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
3
+ const styles = [hostFitContentStyles, css `
4
+
5
+ :host {
6
+
7
+ --mdc-link-border-radius: 0.25rem;
8
+ --mdc-link-color-active: var(--mds-color-theme-text-accent-active);
9
+ --mdc-link-color-disabled: var(--mds-color-theme-text-primary-disabled);
10
+ --mdc-link-color-hover: var(--mds-color-theme-text-accent-hover);
11
+ --mdc-link-color-normal: var(--mds-color-theme-text-accent-normal);
12
+ --mdc-link-icon-margin-left: 0.25rem;
13
+ --mdc-link-inverted-color-active: var(--mds-color-theme-inverted-text-accent-active);
14
+ --mdc-link-inverted-color-disabled: var(--mds-color-theme-inverted-text-primary-disabled);
15
+ --mdc-link-inverted-color-hover: var(--mds-color-theme-inverted-text-accent-hover);
16
+ --mdc-link-inverted-color-normal: var(--mds-color-theme-inverted-text-accent-normal);
17
+ --mdc-link-text-decoration-disabled: underline;
18
+
19
+ border-radius: var(--mdc-link-border-radius);
20
+ color: var(--mdc-link-color-normal);
21
+ }
22
+
23
+ ::slotted(a) {
24
+ outline: none;
25
+ align-items: center;
26
+ color: inherit;
27
+ display: flex;
28
+ gap: var(--mdc-link-icon-margin-left);
29
+ text-decoration: inherit;
30
+ text-underline-offset: auto;
31
+ text-underline-position: from-font;
32
+ }
33
+
34
+ :host(:hover) {
35
+ color: var(--mdc-link-color-hover);
36
+ }
37
+
38
+ :host(:active) {
39
+ color: var(--mdc-link-color-active);
40
+ }
41
+
42
+ :host([inline]) {
43
+ display: inline-flex;
44
+ }
45
+
46
+ :host([inverted]) {
47
+ color: var(--mdc-link-inverted-color-normal);
48
+ }
49
+
50
+ :host([inverted]:hover) {
51
+ color: var(--mdc-link-inverted-color-hover);
52
+ }
53
+
54
+ :host([inverted]:active) {
55
+ color: var(--mdc-link-inverted-color-active);
56
+ }
57
+
58
+ :host([size="large"]) {
59
+ font-size: var(--mds-font-apps-body-large-regular-font-size);
60
+ font-weight: var(--mds-font-apps-body-large-regular-font-weight);
61
+ line-height: var(--mds-font-apps-body-large-regular-line-height);
62
+ text-decoration: var(--mds-font-apps-body-large-regular-text-decoration);
63
+ text-transform: var(--mds-font-apps-body-large-regular-text-case);
64
+ }
65
+
66
+ :host([size="midsize"]) {
67
+ font-size: var(--mds-font-apps-body-midsize-regular-font-size);
68
+ font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
69
+ line-height: var(--mds-font-apps-body-midsize-regular-line-height);
70
+ text-decoration: var(--mds-font-apps-body-midsize-regular-text-decoration);
71
+ text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
72
+ }
73
+
74
+ :host([size="small"]) {
75
+ font-size: var(--mds-font-apps-body-small-regular-font-size);
76
+ font-weight: var(--mds-font-apps-body-small-regular-font-weight);
77
+ line-height: var(--mds-font-apps-body-small-regular-line-height);
78
+ text-decoration: var(--mds-font-apps-body-small-regular-text-decoration);
79
+ text-transform: var(--mds-font-apps-body-small-regular-text-case);
80
+ }
81
+
82
+ :host([size="large"]:hover), :host([size="large"]:active), :host([size="large"][inline]) {
83
+ font-size: var(--mds-font-apps-body-large-regular-underline-font-size);
84
+ font-weight: var(--mds-font-apps-body-large-regular-underline-font-weight);
85
+ line-height: var(--mds-font-apps-body-large-regular-underline-line-height);
86
+ text-decoration: var(--mds-font-apps-body-large-regular-underline-text-decoration);
87
+ text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
88
+ }
89
+
90
+ :host([size="midsize"]:hover), :host([size="midsize"]:active), :host([size="midsize"][inline]) {
91
+ font-size: var(--mds-font-apps-body-midsize-regular-underline-font-size);
92
+ font-weight: var(--mds-font-apps-body-midsize-regular-underline-font-weight);
93
+ line-height: var(--mds-font-apps-body-midsize-regular-underline-line-height);
94
+ text-decoration: var(--mds-font-apps-body-midsize-regular-underline-text-decoration);
95
+ text-transform: var(--mds-font-apps-body-midsize-regular-underline-text-case);
96
+ }
97
+
98
+ :host([size="small"]:hover), :host([size="small"]:active), :host([size="small"][inline]) {
99
+ font-size: var(--mds-font-apps-body-small-regular-underline-font-size);
100
+ font-weight: var(--mds-font-apps-body-small-regular-underline-font-weight);
101
+ line-height: var(--mds-font-apps-body-small-regular-underline-line-height);
102
+ text-decoration: var(--mds-font-apps-body-small-regular-underline-text-decoration);
103
+ text-transform: var(--mds-font-apps-body-small-regular-underline-text-case);
104
+ }
105
+
106
+ :host([disabled]) {
107
+ color: var(--mdc-link-color-disabled);
108
+ pointer-events: none;
109
+ text-decoration: var(--mdc-link-text-decoration-disabled);
110
+ }
111
+
112
+ :host([inverted][disabled]) {
113
+ color: var(--mdc-link-inverted-color-disabled);
114
+ }
115
+ `, ...hostFocusRingStyles()];
116
+ export default styles;
@@ -0,0 +1,4 @@
1
+ import type { ValueOf } from '../../utils/types';
2
+ import { LINK_SIZES } from './link.constants';
3
+ type LinkSize = ValueOf<typeof LINK_SIZES>;
4
+ export { LinkSize, };
@@ -0,0 +1 @@
1
+ export {};
@@ -2678,6 +2678,227 @@
2678
2678
  }
2679
2679
  ]
2680
2680
  },
2681
+ {
2682
+ "kind": "javascript-module",
2683
+ "path": "components/link/link.component.js",
2684
+ "declarations": [
2685
+ {
2686
+ "kind": "class",
2687
+ "description": "`mdc-link` component can be used to navigate to a different page\nwithin the application or to an external site. It can be used to link to\nemails or phone numbers.\n\nThe `children` of the link component is expected to be an anchor element\ncontaining the text, href, and other attributes.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.",
2688
+ "name": "Link",
2689
+ "cssProperties": [
2690
+ {
2691
+ "description": "Border radius of the link",
2692
+ "name": "--mdc-link-border-radius"
2693
+ },
2694
+ {
2695
+ "description": "Text and icon color of the link in active state",
2696
+ "name": "--mdc-link-color-active"
2697
+ },
2698
+ {
2699
+ "description": "Text and icon color of the link in disabled state",
2700
+ "name": "--mdc-link-color-disabled"
2701
+ },
2702
+ {
2703
+ "description": "Text and icon color of the link in hover state",
2704
+ "name": "--mdc-link-color-hover"
2705
+ },
2706
+ {
2707
+ "description": "Text and icon color of the link in normal state",
2708
+ "name": "--mdc-link-color-normal"
2709
+ },
2710
+ {
2711
+ "description": "Gap between the text and icon (only applicable when an icon is set)",
2712
+ "name": "--mdc-link-icon-margin-left"
2713
+ },
2714
+ {
2715
+ "description": "Text and icon color of the inverted link in active state",
2716
+ "name": "--mdc-link-inverted-color-active"
2717
+ },
2718
+ {
2719
+ "description": "Text and icon color of the inverted link in disabled state",
2720
+ "name": "--mdc-link-inverted-color-disabled"
2721
+ },
2722
+ {
2723
+ "description": "Text and icon color of the inverted link in hover state",
2724
+ "name": "--mdc-link-inverted-color-hover"
2725
+ },
2726
+ {
2727
+ "description": "Text and icon color of the inverted link in normal state",
2728
+ "name": "--mdc-link-inverted-color-normal"
2729
+ },
2730
+ {
2731
+ "description": "Text decoration of the link in disabled state for all variants",
2732
+ "name": "--mdc-link-text-decoration-disabled"
2733
+ }
2734
+ ],
2735
+ "members": [
2736
+ {
2737
+ "kind": "field",
2738
+ "name": "iconName",
2739
+ "type": {
2740
+ "text": "IconNames | undefined"
2741
+ },
2742
+ "description": "Name of the icon (= filename) to be used as trailing icon for link.\n\nIf no `icon` is provided, no icon will be rendered.",
2743
+ "attribute": "icon-name"
2744
+ },
2745
+ {
2746
+ "kind": "field",
2747
+ "name": "inline",
2748
+ "type": {
2749
+ "text": "boolean"
2750
+ },
2751
+ "description": "The link can be inline or standalone.",
2752
+ "default": "false",
2753
+ "attribute": "inline",
2754
+ "reflects": true
2755
+ },
2756
+ {
2757
+ "kind": "field",
2758
+ "name": "inverted",
2759
+ "type": {
2760
+ "text": "boolean"
2761
+ },
2762
+ "description": "The link color can be inverted by setting the inverted attribute to true.",
2763
+ "default": "false",
2764
+ "attribute": "inverted",
2765
+ "reflects": true
2766
+ },
2767
+ {
2768
+ "kind": "field",
2769
+ "name": "size",
2770
+ "type": {
2771
+ "text": "LinkSize"
2772
+ },
2773
+ "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
2774
+ "default": "large",
2775
+ "attribute": "size",
2776
+ "reflects": true
2777
+ },
2778
+ {
2779
+ "kind": "method",
2780
+ "name": "getIconSize",
2781
+ "privacy": "private",
2782
+ "return": {
2783
+ "type": {
2784
+ "text": ""
2785
+ }
2786
+ },
2787
+ "description": "Method to get the size of the trailing icon based on the link size."
2788
+ },
2789
+ {
2790
+ "kind": "method",
2791
+ "name": "setDisabled",
2792
+ "privacy": "private",
2793
+ "parameters": [
2794
+ {
2795
+ "name": "disabled",
2796
+ "type": {
2797
+ "text": "boolean"
2798
+ },
2799
+ "description": "The disabled state of icon"
2800
+ }
2801
+ ],
2802
+ "description": "Updates the tabindex of the host element to disable or enable the link.\nWhen disabled, the link is not focusable or clickable, and tabindex is set to -1\nand aria-disabled attribute is set to true\nWhen link is not disabled, the previous tabindex of the host element is restored\nand aria-disabled attribute is removed."
2803
+ },
2804
+ {
2805
+ "kind": "method",
2806
+ "name": "updateTrailingIcon",
2807
+ "privacy": "private",
2808
+ "description": "Method to create and append trailing icon to the first anchor element in the slot.\nIf no icon name is provided, no icon will be rendered."
2809
+ },
2810
+ {
2811
+ "kind": "field",
2812
+ "name": "disabled",
2813
+ "type": {
2814
+ "text": "boolean"
2815
+ },
2816
+ "default": "false",
2817
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
2818
+ "attribute": "disabled",
2819
+ "reflects": true,
2820
+ "inheritedFrom": {
2821
+ "name": "DisabledMixin",
2822
+ "module": "utils/mixins/DisabledMixin.js"
2823
+ }
2824
+ }
2825
+ ],
2826
+ "attributes": [
2827
+ {
2828
+ "name": "icon-name",
2829
+ "type": {
2830
+ "text": "IconNames | undefined"
2831
+ },
2832
+ "description": "Name of the icon (= filename) to be used as trailing icon for link.\n\nIf no `icon` is provided, no icon will be rendered.",
2833
+ "fieldName": "iconName"
2834
+ },
2835
+ {
2836
+ "name": "inline",
2837
+ "type": {
2838
+ "text": "boolean"
2839
+ },
2840
+ "description": "The link can be inline or standalone.",
2841
+ "default": "false",
2842
+ "fieldName": "inline"
2843
+ },
2844
+ {
2845
+ "name": "inverted",
2846
+ "type": {
2847
+ "text": "boolean"
2848
+ },
2849
+ "description": "The link color can be inverted by setting the inverted attribute to true.",
2850
+ "default": "false",
2851
+ "fieldName": "inverted"
2852
+ },
2853
+ {
2854
+ "name": "size",
2855
+ "type": {
2856
+ "text": "LinkSize"
2857
+ },
2858
+ "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
2859
+ "default": "large",
2860
+ "fieldName": "size"
2861
+ },
2862
+ {
2863
+ "name": "disabled",
2864
+ "type": {
2865
+ "text": "boolean"
2866
+ },
2867
+ "default": "false",
2868
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
2869
+ "fieldName": "disabled",
2870
+ "inheritedFrom": {
2871
+ "name": "DisabledMixin",
2872
+ "module": "src/utils/mixins/DisabledMixin.ts"
2873
+ }
2874
+ }
2875
+ ],
2876
+ "mixins": [
2877
+ {
2878
+ "name": "DisabledMixin",
2879
+ "module": "/src/utils/mixins/DisabledMixin"
2880
+ }
2881
+ ],
2882
+ "superclass": {
2883
+ "name": "Component",
2884
+ "module": "/src/models"
2885
+ },
2886
+ "tagName": "mdc-link",
2887
+ "jsDoc": "/**\n * `mdc-link` component can be used to navigate to a different page\n * within the application or to an external site. It can be used to link to\n * emails or phone numbers.\n *\n * The `children` of the link component is expected to be an anchor element\n * containing the text, href, and other attributes.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-link\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link\n * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state\n * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state\n * @cssproperty --mdc-link-color-hover - Text and icon color of the link in hover state\n * @cssproperty --mdc-link-color-normal - Text and icon color of the link in normal state\n * @cssproperty --mdc-link-icon-margin-left - Gap between the text and icon (only applicable when an icon is set)\n * @cssproperty --mdc-link-inverted-color-active - Text and icon color of the inverted link in active state\n * @cssproperty --mdc-link-inverted-color-disabled - Text and icon color of the inverted link in disabled state\n * @cssproperty --mdc-link-inverted-color-hover - Text and icon color of the inverted link in hover state\n * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state\n * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants\n */",
2888
+ "customElement": true
2889
+ }
2890
+ ],
2891
+ "exports": [
2892
+ {
2893
+ "kind": "js",
2894
+ "name": "default",
2895
+ "declaration": {
2896
+ "name": "Link",
2897
+ "module": "components/link/link.component.js"
2898
+ }
2899
+ }
2900
+ ]
2901
+ },
2681
2902
  {
2682
2903
  "kind": "javascript-module",
2683
2904
  "path": "components/marker/marker.component.js",
package/dist/index.d.ts CHANGED
@@ -12,6 +12,7 @@ import Divider from './components/divider';
12
12
  import Modalcontainer from './components/modalcontainer';
13
13
  import Buttonsimple from './components/buttonsimple';
14
14
  import Avatarbutton from './components/avatarbutton';
15
+ import Link from './components/link';
15
16
  import type { TextType } from './components/text/text.types';
16
- export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Modalcontainer, Buttonsimple, Avatarbutton, };
17
+ export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Modalcontainer, Buttonsimple, Avatarbutton, Link, };
17
18
  export type { TextType, };
package/dist/index.js CHANGED
@@ -12,4 +12,5 @@ import Divider from './components/divider';
12
12
  import Modalcontainer from './components/modalcontainer';
13
13
  import Buttonsimple from './components/buttonsimple';
14
14
  import Avatarbutton from './components/avatarbutton';
15
- export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Modalcontainer, Buttonsimple, Avatarbutton, };
15
+ import Link from './components/link';
16
+ export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Modalcontainer, Buttonsimple, Avatarbutton, Link, };