@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.
- package/dist/browser/index.js +162 -50
- package/dist/browser/index.js.map +4 -4
- package/dist/components/link/index.d.ts +8 -0
- package/dist/components/link/index.js +5 -0
- package/dist/components/link/link.component.d.ts +90 -0
- package/dist/components/link/link.component.js +154 -0
- package/dist/components/link/link.constants.d.ts +17 -0
- package/dist/components/link/link.constants.js +18 -0
- package/dist/components/link/link.styles.d.ts +2 -0
- package/dist/components/link/link.styles.js +116 -0
- package/dist/components/link/link.types.d.ts +4 -0
- package/dist/components/link/link.types.js +1 -0
- package/dist/custom-elements.json +221 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/react/index.d.ts +1 -0
- package/dist/react/index.js +1 -0
- package/dist/react/link/index.d.ts +29 -0
- package/dist/react/link/index.js +38 -0
- package/dist/utils/styles/index.js +2 -2
- package/package.json +1 -1
@@ -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,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 @@
|
|
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
|
-
|
15
|
+
import Link from './components/link';
|
16
|
+
export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Modalcontainer, Buttonsimple, Avatarbutton, Link, };
|