@fluentui/web-components 3.0.0-beta.33 → 3.0.0-beta.35
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/CHANGELOG.md +20 -2
- package/dist/dts/menu/menu.d.ts +55 -39
- package/dist/dts/menu-item/menu-item.d.ts +11 -57
- package/dist/dts/menu-list/menu-list.d.ts +5 -10
- package/dist/dts/text/text.d.ts +40 -1
- package/dist/esm/menu/menu.js +98 -127
- package/dist/esm/menu/menu.js.map +1 -1
- package/dist/esm/menu/menu.styles.js +22 -8
- package/dist/esm/menu/menu.styles.js.map +1 -1
- package/dist/esm/menu/menu.template.js +3 -10
- package/dist/esm/menu/menu.template.js.map +1 -1
- package/dist/esm/menu-item/menu-item.js +59 -121
- package/dist/esm/menu-item/menu-item.js.map +1 -1
- package/dist/esm/menu-item/menu-item.styles.js +88 -116
- package/dist/esm/menu-item/menu-item.styles.js.map +1 -1
- package/dist/esm/menu-item/menu-item.template.js +17 -47
- package/dist/esm/menu-item/menu-item.template.js.map +1 -1
- package/dist/esm/menu-list/menu-list.js +12 -48
- package/dist/esm/menu-list/menu-list.js.map +1 -1
- package/dist/esm/text/text.js +91 -1
- package/dist/esm/text/text.js.map +1 -1
- package/dist/esm/text/text.styles.js +56 -57
- package/dist/esm/text/text.styles.js.map +1 -1
- package/dist/web-components.d.ts +111 -107
- package/dist/web-components.js +213 -1212
- package/dist/web-components.min.js +337 -334
- package/package.json +1 -2
|
@@ -1,65 +1,35 @@
|
|
|
1
|
-
import { elements, html,
|
|
1
|
+
import { elements, html, slotted } from '@microsoft/fast-element';
|
|
2
2
|
import { staticallyCompose } from '../utils/template-helpers.js';
|
|
3
3
|
import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
|
|
4
4
|
import { MenuItemRole } from './menu-item.js';
|
|
5
|
-
const Checkmark16Filled = html.partial(`<svg
|
|
6
|
-
const chevronRight16Filled = html.partial(`<svg
|
|
5
|
+
const Checkmark16Filled = html.partial(`<svg class="indicator" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
|
|
6
|
+
const chevronRight16Filled = html.partial(`<svg class="submenu-glyph" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg>`);
|
|
7
7
|
export function menuItemTemplate(options = {}) {
|
|
8
8
|
return html `
|
|
9
|
-
|
|
10
|
-
aria-haspopup="${x => (x.
|
|
9
|
+
<template
|
|
10
|
+
aria-haspopup="${x => (!!x.submenu ? 'menu' : void 0)}"
|
|
11
11
|
aria-checked="${x => (x.role !== MenuItemRole.menuitem ? x.checked : void 0)}"
|
|
12
12
|
aria-disabled="${x => x.disabled}"
|
|
13
|
-
aria-expanded="${x => x.
|
|
13
|
+
aria-expanded="${x => (!!x.submenu ? 'false' : void 0)}"
|
|
14
14
|
@keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}"
|
|
15
15
|
@click="${(x, c) => x.handleMenuItemClick(c.event)}"
|
|
16
16
|
@mouseover="${(x, c) => x.handleMouseOver(c.event)}"
|
|
17
17
|
@mouseout="${(x, c) => x.handleMouseOut(c.event)}"
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<span part="checkbox" class="checkbox">
|
|
22
|
-
<slot name="checkbox-indicator"> ${staticallyCompose(options.checkboxIndicator)} </slot>
|
|
23
|
-
</span>
|
|
24
|
-
</div>
|
|
25
|
-
`)}
|
|
26
|
-
${when(x => x.role === MenuItemRole.menuitemradio, html `
|
|
27
|
-
<div part="input-container" class="input-container">
|
|
28
|
-
<span part="radio" class="radio">
|
|
29
|
-
<slot name="radio-indicator"> ${staticallyCompose(options.radioIndicator)} </slot>
|
|
30
|
-
</span>
|
|
31
|
-
</div>
|
|
32
|
-
`)}
|
|
33
|
-
</div>
|
|
18
|
+
@toggle="${(x, c) => x.toggleHandler(c.event)}"
|
|
19
|
+
>
|
|
20
|
+
<slot name="indicator"> ${staticallyCompose(options.indicator)} </slot>
|
|
34
21
|
${startSlotTemplate(options)}
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
</
|
|
22
|
+
<div part="content" class="content">
|
|
23
|
+
<slot></slot>
|
|
24
|
+
</div>
|
|
38
25
|
${endSlotTemplate(options)}
|
|
39
|
-
${
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<slot name="expand-collapse-indicator"> ${staticallyCompose(options.expandCollapseGlyph)} </slot>
|
|
43
|
-
</span>
|
|
44
|
-
</div>
|
|
45
|
-
`)}
|
|
46
|
-
<span
|
|
47
|
-
?hidden="${x => !x.expanded}"
|
|
48
|
-
class="submenu-container"
|
|
49
|
-
part="submenu-container"
|
|
50
|
-
${ref('submenuContainer')}
|
|
51
|
-
>
|
|
52
|
-
<slot name="submenu" ${slotted({
|
|
53
|
-
property: 'slottedSubmenu',
|
|
54
|
-
filter: elements("[role='menu']"),
|
|
55
|
-
})}></slot>
|
|
56
|
-
</span>
|
|
57
|
-
</template>
|
|
26
|
+
<slot name="submenu-glyph"> ${staticallyCompose(options.submenuGlyph)} </slot>
|
|
27
|
+
<slot name="submenu" ${slotted({ property: 'slottedSubmenu', filter: elements("[role='menu']") })}></slot>
|
|
28
|
+
</template>
|
|
58
29
|
`;
|
|
59
30
|
}
|
|
60
31
|
export const template = menuItemTemplate({
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
radioIndicator: Checkmark16Filled,
|
|
32
|
+
indicator: Checkmark16Filled,
|
|
33
|
+
submenuGlyph: chevronRight16Filled,
|
|
64
34
|
});
|
|
65
35
|
//# sourceMappingURL=menu-item.template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.template.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"menu-item.template.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CACpC,8TAA8T,CAC/T,CAAC;AACF,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CACvC,wTAAwT,CACzT,CAAC;AAEF,MAAM,UAAU,gBAAgB,CAAqB,UAA2B,EAAE;IAChF,OAAO,IAAI,CAAG;;uBAEO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;sBACrC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;uBAC3D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;kBAC1C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAsB,CAAC;gBAC7D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAmB,CAAC;oBAClD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;mBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;iBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAoB,CAAC;;gCAElC,iBAAiB,CAAC,OAAO,CAAC,SAAS,CAAC;QAC5D,iBAAiB,CAAC,OAAO,CAAC;;;;QAI1B,eAAe,CAAC,OAAO,CAAC;oCACI,iBAAiB,CAAC,OAAO,CAAC,YAAY,CAAC;6BAC9C,OAAO,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,EAAE,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC;;GAEpG,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,CAAC;IACtE,SAAS,EAAE,iBAAiB;IAC5B,YAAY,EAAE,oBAAoB;CACnC,CAAC,CAAC"}
|
|
@@ -14,7 +14,6 @@ import { MenuItemRole } from '../menu-item/menu-item.options.js';
|
|
|
14
14
|
export class MenuList extends FASTElement {
|
|
15
15
|
constructor() {
|
|
16
16
|
super(...arguments);
|
|
17
|
-
this.expandedItem = null;
|
|
18
17
|
/**
|
|
19
18
|
* The index of the focusable element in the items array
|
|
20
19
|
* defaults to -1
|
|
@@ -34,7 +33,6 @@ export class MenuList extends FASTElement {
|
|
|
34
33
|
*/
|
|
35
34
|
this.handleFocusOut = (e) => {
|
|
36
35
|
if (!this.contains(e.relatedTarget) && this.menuItems !== undefined) {
|
|
37
|
-
this.collapseExpandedItem();
|
|
38
36
|
// find our first focusable element
|
|
39
37
|
const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
|
|
40
38
|
// set the current focus index's tabindex to -1
|
|
@@ -53,34 +51,10 @@ export class MenuList extends FASTElement {
|
|
|
53
51
|
targetItem.setAttribute('tabindex', '0');
|
|
54
52
|
}
|
|
55
53
|
};
|
|
56
|
-
this.handleExpandedChanged = (e) => {
|
|
57
|
-
if (e.defaultPrevented ||
|
|
58
|
-
e.target === null ||
|
|
59
|
-
this.menuItems === undefined ||
|
|
60
|
-
this.menuItems.indexOf(e.target) < 0) {
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
e.preventDefault();
|
|
64
|
-
const changedItem = e.target;
|
|
65
|
-
// closing an expanded item without opening another
|
|
66
|
-
if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) {
|
|
67
|
-
this.expandedItem = null;
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
if (changedItem.expanded) {
|
|
71
|
-
if (this.expandedItem !== null && this.expandedItem !== changedItem) {
|
|
72
|
-
this.expandedItem.expanded = false;
|
|
73
|
-
}
|
|
74
|
-
this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
|
|
75
|
-
this.expandedItem = changedItem;
|
|
76
|
-
this.focusIndex = this.menuItems.indexOf(changedItem);
|
|
77
|
-
changedItem.setAttribute('tabindex', '0');
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
54
|
/**
|
|
81
|
-
*
|
|
55
|
+
* Handle change from child MenuItem element and set radio group behavior
|
|
82
56
|
*/
|
|
83
|
-
this.
|
|
57
|
+
this.changedMenuItemHandler = (e) => {
|
|
84
58
|
if (this.menuItems === undefined) {
|
|
85
59
|
return;
|
|
86
60
|
}
|
|
@@ -145,7 +119,7 @@ export class MenuList extends FASTElement {
|
|
|
145
119
|
// connect before setting/checking their props/attributes
|
|
146
120
|
this.setItems();
|
|
147
121
|
});
|
|
148
|
-
this.addEventListener('change', this.
|
|
122
|
+
this.addEventListener('change', this.changedMenuItemHandler);
|
|
149
123
|
}
|
|
150
124
|
/**
|
|
151
125
|
* @internal
|
|
@@ -154,7 +128,7 @@ export class MenuList extends FASTElement {
|
|
|
154
128
|
super.disconnectedCallback();
|
|
155
129
|
this.removeItemListeners();
|
|
156
130
|
this.menuItems = undefined;
|
|
157
|
-
this.removeEventListener('change', this.
|
|
131
|
+
this.removeEventListener('change', this.changedMenuItemHandler);
|
|
158
132
|
}
|
|
159
133
|
/**
|
|
160
134
|
* Focuses the first item in the menu.
|
|
@@ -164,17 +138,6 @@ export class MenuList extends FASTElement {
|
|
|
164
138
|
focus() {
|
|
165
139
|
this.setFocus(0, 1);
|
|
166
140
|
}
|
|
167
|
-
/**
|
|
168
|
-
* Collapses any expanded menu items.
|
|
169
|
-
*
|
|
170
|
-
* @public
|
|
171
|
-
*/
|
|
172
|
-
collapseExpandedItem() {
|
|
173
|
-
if (this.expandedItem !== null) {
|
|
174
|
-
this.expandedItem.expanded = false;
|
|
175
|
-
this.expandedItem = null;
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
141
|
/**
|
|
179
142
|
* @internal
|
|
180
143
|
*/
|
|
@@ -207,7 +170,6 @@ export class MenuList extends FASTElement {
|
|
|
207
170
|
removeItemListeners(items = this.items) {
|
|
208
171
|
items.forEach(item => {
|
|
209
172
|
item.removeEventListener('focus', this.handleItemFocus);
|
|
210
|
-
item.removeEventListener('expanded-changed', this.handleExpandedChanged);
|
|
211
173
|
Observable.getNotifier(item).unsubscribe(this, 'hidden');
|
|
212
174
|
});
|
|
213
175
|
}
|
|
@@ -233,7 +195,6 @@ export class MenuList extends FASTElement {
|
|
|
233
195
|
}
|
|
234
196
|
menuItems.forEach((item, index) => {
|
|
235
197
|
item.setAttribute('tabindex', index === 0 ? '0' : '-1');
|
|
236
|
-
item.addEventListener('expanded-change', this.handleExpandedChanged);
|
|
237
198
|
item.addEventListener('focus', this.handleItemFocus);
|
|
238
199
|
});
|
|
239
200
|
/**
|
|
@@ -242,16 +203,19 @@ export class MenuList extends FASTElement {
|
|
|
242
203
|
* used to set the indent of the element's start slot content.
|
|
243
204
|
*/
|
|
244
205
|
const filteredMenuListItems = (_a = this.menuItems) === null || _a === void 0 ? void 0 : _a.filter(this.isMenuItemElement);
|
|
245
|
-
filteredMenuListItems === null || filteredMenuListItems === void 0 ? void 0 : filteredMenuListItems.
|
|
246
|
-
const
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
206
|
+
const indent = filteredMenuListItems === null || filteredMenuListItems === void 0 ? void 0 : filteredMenuListItems.reduce((accum, current) => {
|
|
207
|
+
const elementValue = MenuList.elementIndent(current);
|
|
208
|
+
return Math.max(accum, elementValue);
|
|
209
|
+
}, 0);
|
|
210
|
+
filteredMenuListItems === null || filteredMenuListItems === void 0 ? void 0 : filteredMenuListItems.forEach((item) => {
|
|
250
211
|
if (item instanceof MenuItem) {
|
|
251
212
|
item.setAttribute('data-indent', `${indent}`);
|
|
252
213
|
}
|
|
253
214
|
});
|
|
254
215
|
}
|
|
216
|
+
/**
|
|
217
|
+
* Method for Observable changes to the hidden attribute of child elements
|
|
218
|
+
*/
|
|
255
219
|
handleChange(source, propertyName) {
|
|
256
220
|
if (propertyName === 'hidden') {
|
|
257
221
|
this.setItems();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-list.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAEzG,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE;;;;;;;GAOG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW;IAAzC;;
|
|
1
|
+
{"version":3,"file":"menu-list.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.ts"],"names":[],"mappings":"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"}
|
package/dist/esm/text/text.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { attr, FASTElement } from '@microsoft/fast-element';
|
|
2
|
+
import { attr, FASTElement, Observable } from '@microsoft/fast-element';
|
|
3
|
+
import { toggleState } from '../utils/element-internals.js';
|
|
3
4
|
/**
|
|
4
5
|
* The base class used for constructing a fluent-text custom element
|
|
5
6
|
* @public
|
|
@@ -7,6 +8,12 @@ import { attr, FASTElement } from '@microsoft/fast-element';
|
|
|
7
8
|
export class Text extends FASTElement {
|
|
8
9
|
constructor() {
|
|
9
10
|
super(...arguments);
|
|
11
|
+
/**
|
|
12
|
+
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
|
|
13
|
+
*
|
|
14
|
+
* @internal
|
|
15
|
+
*/
|
|
16
|
+
this.elementInternals = this.attachInternals();
|
|
10
17
|
/**
|
|
11
18
|
* The text will not wrap
|
|
12
19
|
* NOTE: In Fluent UI React v9 this is "wrap"
|
|
@@ -58,6 +65,89 @@ export class Text extends FASTElement {
|
|
|
58
65
|
*/
|
|
59
66
|
this.block = false;
|
|
60
67
|
}
|
|
68
|
+
/**
|
|
69
|
+
* Handles changes to size attribute custom states
|
|
70
|
+
* @param prev - the previous state
|
|
71
|
+
* @param next - the next state
|
|
72
|
+
*/
|
|
73
|
+
sizeChanged(prev, next) {
|
|
74
|
+
if (prev) {
|
|
75
|
+
toggleState(this.elementInternals, `size-${prev}`, false);
|
|
76
|
+
}
|
|
77
|
+
if (next) {
|
|
78
|
+
toggleState(this.elementInternals, `size-${next}`, true);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* Handles changes to font attribute custom states
|
|
83
|
+
* @param prev - the previous state
|
|
84
|
+
* @param next - the next state
|
|
85
|
+
*/
|
|
86
|
+
fontChanged(prev, next) {
|
|
87
|
+
if (prev) {
|
|
88
|
+
toggleState(this.elementInternals, prev, false);
|
|
89
|
+
}
|
|
90
|
+
if (next) {
|
|
91
|
+
toggleState(this.elementInternals, next, true);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Handles changes to weight attribute custom states
|
|
96
|
+
* @param prev - the previous state
|
|
97
|
+
* @param next - the next state
|
|
98
|
+
*/
|
|
99
|
+
weightChanged(prev, next) {
|
|
100
|
+
if (prev) {
|
|
101
|
+
toggleState(this.elementInternals, prev, false);
|
|
102
|
+
}
|
|
103
|
+
if (next) {
|
|
104
|
+
toggleState(this.elementInternals, next, true);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Handles changes to align attribute custom states
|
|
109
|
+
* @param prev - the previous state
|
|
110
|
+
* @param next - the next state
|
|
111
|
+
*/
|
|
112
|
+
alignChanged(prev, next) {
|
|
113
|
+
if (prev) {
|
|
114
|
+
toggleState(this.elementInternals, prev, false);
|
|
115
|
+
}
|
|
116
|
+
if (next) {
|
|
117
|
+
toggleState(this.elementInternals, next, true);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
connectedCallback() {
|
|
121
|
+
super.connectedCallback();
|
|
122
|
+
Observable.getNotifier(this).subscribe(this);
|
|
123
|
+
Object.keys(this.$fastController.definition.attributeLookup).forEach(key => {
|
|
124
|
+
this.handleChange(this, key);
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
disconnectedCallback() {
|
|
128
|
+
super.disconnectedCallback();
|
|
129
|
+
Observable.getNotifier(this).unsubscribe(this);
|
|
130
|
+
}
|
|
131
|
+
/**
|
|
132
|
+
* Handles changes to observable properties
|
|
133
|
+
* @internal
|
|
134
|
+
* @param source - the source of the change
|
|
135
|
+
* @param propertyName - the property name being changed
|
|
136
|
+
*/
|
|
137
|
+
handleChange(source, propertyName) {
|
|
138
|
+
switch (propertyName) {
|
|
139
|
+
case 'nowrap':
|
|
140
|
+
case 'truncate':
|
|
141
|
+
case 'italic':
|
|
142
|
+
case 'underline':
|
|
143
|
+
case 'strikethrough':
|
|
144
|
+
case 'block':
|
|
145
|
+
toggleState(this.elementInternals, propertyName, !!this[propertyName]);
|
|
146
|
+
break;
|
|
147
|
+
default:
|
|
148
|
+
break;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
61
151
|
}
|
|
62
152
|
__decorate([
|
|
63
153
|
attr({ mode: 'boolean' })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/text/text.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,IAAK,SAAQ,WAAW;IAArC;;QACE;;;;;;;;WAQG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;;;;;WAMG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAE1B;;;;;;WAMG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;;;;;WAMG;QAEH,cAAS,GAAY,KAAK,CAAC;QAE3B;;;;;;WAMG;QAEH,kBAAa,GAAY,KAAK,CAAC;QAE/B;;;;;;WAMG;QAEH,UAAK,GAAY,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/text/text.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,26 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '../utils/index.js';
|
|
3
3
|
import { fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, } from '../theme/design-tokens.js';
|
|
4
|
+
/**
|
|
5
|
+
* Selector for the `nowrap` state.
|
|
6
|
+
* @public
|
|
7
|
+
*/
|
|
8
|
+
const nowrapState = css.partial `:is([state--nowrap], :state(nowrap))`;
|
|
9
|
+
/**
|
|
10
|
+
* Selector for the `truncate` state.
|
|
11
|
+
* @public
|
|
12
|
+
*/
|
|
13
|
+
const truncateState = css.partial `:is([state--truncate], :state(truncate))`;
|
|
14
|
+
/**
|
|
15
|
+
* Selector for the `underline` state.
|
|
16
|
+
* @public
|
|
17
|
+
*/
|
|
18
|
+
const underlineState = css.partial `:is([state--underline], :state(underline))`;
|
|
19
|
+
/**
|
|
20
|
+
* Selector for the `strikethrough` state.
|
|
21
|
+
* @public
|
|
22
|
+
*/
|
|
23
|
+
const strikethroughState = css.partial `:is([state--strikethrough], :state(strikethrough))`;
|
|
4
24
|
/** Text styles
|
|
5
25
|
* @public
|
|
6
26
|
*/
|
|
@@ -9,127 +29,106 @@ export const styles = css `
|
|
|
9
29
|
|
|
10
30
|
:host {
|
|
11
31
|
contain: content;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
::slotted(*) {
|
|
15
32
|
font-family: ${fontFamilyBase};
|
|
16
33
|
font-size: ${fontSizeBase300};
|
|
17
34
|
line-height: ${lineHeightBase300};
|
|
18
35
|
font-weight: ${fontWeightRegular};
|
|
19
36
|
text-align: start;
|
|
20
|
-
white-space: normal;
|
|
21
|
-
overflow: visible;
|
|
22
|
-
text-overflow: clip;
|
|
23
|
-
margin: 0;
|
|
24
|
-
display: inline;
|
|
25
37
|
}
|
|
26
38
|
|
|
27
|
-
:host(
|
|
28
|
-
:host(
|
|
39
|
+
:host(${nowrapState}),
|
|
40
|
+
:host(${nowrapState}) ::slotted(*) {
|
|
29
41
|
white-space: nowrap;
|
|
30
42
|
overflow: hidden;
|
|
31
43
|
}
|
|
32
|
-
:host(
|
|
33
|
-
:host(
|
|
44
|
+
:host(${truncateState}),
|
|
45
|
+
:host(${truncateState}) ::slotted(*) {
|
|
34
46
|
text-overflow: ellipsis;
|
|
35
47
|
}
|
|
36
|
-
:host([block])
|
|
37
|
-
:host([block]) ::slotted(*),
|
|
38
|
-
:host([block]) {
|
|
48
|
+
:host(:is([state--block], :state(block))) {
|
|
39
49
|
display: block;
|
|
40
50
|
}
|
|
41
|
-
:host([italic]
|
|
42
|
-
:host([italic]) {
|
|
51
|
+
:host(:is([state--italic], :state(italic))) {
|
|
43
52
|
font-style: italic;
|
|
44
53
|
}
|
|
45
|
-
:host(
|
|
46
|
-
:host([underline]) {
|
|
54
|
+
:host(${underlineState}) {
|
|
47
55
|
text-decoration-line: underline;
|
|
48
56
|
}
|
|
49
|
-
:host(
|
|
50
|
-
:host([strikethrough]) {
|
|
57
|
+
:host(${strikethroughState}) {
|
|
51
58
|
text-decoration-line: line-through;
|
|
52
59
|
}
|
|
53
|
-
:host(
|
|
54
|
-
:host([underline][strikethrough]) {
|
|
60
|
+
:host(${underlineState}${strikethroughState}) {
|
|
55
61
|
text-decoration-line: line-through underline;
|
|
56
62
|
}
|
|
57
|
-
:host([size
|
|
58
|
-
:host([size='100']) {
|
|
63
|
+
:host(:is([state--size-100], :state(size-100))) {
|
|
59
64
|
font-size: ${fontSizeBase100};
|
|
60
65
|
line-height: ${lineHeightBase100};
|
|
61
66
|
}
|
|
62
|
-
:host([size
|
|
63
|
-
:host([size='200']) {
|
|
67
|
+
:host(:is([state--size-200], :state(size-200))) {
|
|
64
68
|
font-size: ${fontSizeBase200};
|
|
65
69
|
line-height: ${lineHeightBase200};
|
|
66
70
|
}
|
|
67
|
-
:host([size
|
|
68
|
-
:host([size='400']) {
|
|
71
|
+
:host(:is([state--size-400], :state(size-400))) {
|
|
69
72
|
font-size: ${fontSizeBase400};
|
|
70
73
|
line-height: ${lineHeightBase400};
|
|
71
74
|
}
|
|
72
|
-
:host([size
|
|
73
|
-
:host([size='500']) {
|
|
75
|
+
:host(:is([state--size-500], :state(size-500))) {
|
|
74
76
|
font-size: ${fontSizeBase500};
|
|
75
77
|
line-height: ${lineHeightBase500};
|
|
76
78
|
}
|
|
77
|
-
:host([size
|
|
78
|
-
:host([size='600']) {
|
|
79
|
+
:host(:is([state--size-600], :state(size-600))) {
|
|
79
80
|
font-size: ${fontSizeBase600};
|
|
80
81
|
line-height: ${lineHeightBase600};
|
|
81
82
|
}
|
|
82
|
-
:host([size
|
|
83
|
-
:host([size='700']) {
|
|
83
|
+
:host(:is([state--size-700], :state(size-700))) {
|
|
84
84
|
font-size: ${fontSizeHero700};
|
|
85
85
|
line-height: ${lineHeightHero700};
|
|
86
86
|
}
|
|
87
|
-
:host([size
|
|
88
|
-
:host([size='800']) {
|
|
87
|
+
:host(:is([state--size-800], :state(size-800))) {
|
|
89
88
|
font-size: ${fontSizeHero800};
|
|
90
89
|
line-height: ${lineHeightHero800};
|
|
91
90
|
}
|
|
92
|
-
:host([size
|
|
93
|
-
:host([size='900']) {
|
|
91
|
+
:host(:is([state--size-900], :state(size-900))) {
|
|
94
92
|
font-size: ${fontSizeHero900};
|
|
95
93
|
line-height: ${lineHeightHero900};
|
|
96
94
|
}
|
|
97
|
-
:host([size
|
|
98
|
-
:host([size='1000']) {
|
|
95
|
+
:host(:is([state--size-1000], :state(size-1000))) {
|
|
99
96
|
font-size: ${fontSizeHero1000};
|
|
100
97
|
line-height: ${lineHeightHero1000};
|
|
101
98
|
}
|
|
102
|
-
:host([
|
|
103
|
-
:host([font='monospace']) {
|
|
99
|
+
:host(:is([state--monospace], :state(monospace))) {
|
|
104
100
|
font-family: ${fontFamilyMonospace};
|
|
105
101
|
}
|
|
106
|
-
:host([
|
|
107
|
-
:host([font='numeric']) {
|
|
102
|
+
:host(:is([state--numeric], :state(numeric))) {
|
|
108
103
|
font-family: ${fontFamilyNumeric};
|
|
109
104
|
}
|
|
110
|
-
:host([
|
|
111
|
-
:host([weight='medium']) {
|
|
105
|
+
:host(:is([state--medium], :state(medium))) {
|
|
112
106
|
font-weight: ${fontWeightMedium};
|
|
113
107
|
}
|
|
114
|
-
:host([
|
|
115
|
-
:host([weight='semibold']) {
|
|
108
|
+
:host(:is([state--semibold], :state(semibold))) {
|
|
116
109
|
font-weight: ${fontWeightSemibold};
|
|
117
110
|
}
|
|
118
|
-
:host([
|
|
119
|
-
:host([weight='bold']) {
|
|
111
|
+
:host(:is([state--bold], :state(bold))) {
|
|
120
112
|
font-weight: ${fontWeightBold};
|
|
121
113
|
}
|
|
122
|
-
:host([
|
|
123
|
-
:host([align='center']) {
|
|
114
|
+
:host(:is([state--center], :state(center))) {
|
|
124
115
|
text-align: center;
|
|
125
116
|
}
|
|
126
|
-
:host([
|
|
127
|
-
:host([align='end']) {
|
|
117
|
+
:host(:is([state--end], :state(end))) {
|
|
128
118
|
text-align: end;
|
|
129
119
|
}
|
|
130
|
-
:host([
|
|
131
|
-
:host([align='justify']) {
|
|
120
|
+
:host(:is([state--justify], :state(justify))) {
|
|
132
121
|
text-align: justify;
|
|
133
122
|
}
|
|
123
|
+
|
|
124
|
+
::slotted(*) {
|
|
125
|
+
display: inherit;
|
|
126
|
+
font: inherit;
|
|
127
|
+
line-height: inherit;
|
|
128
|
+
text-decoration-line: inherit;
|
|
129
|
+
text-align: inherit;
|
|
130
|
+
text-decoration-line: inherit;
|
|
131
|
+
margin: 0;
|
|
132
|
+
}
|
|
134
133
|
`;
|
|
135
134
|
//# sourceMappingURL=text.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../src/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC
|
|
1
|
+
{"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../src/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;;GAGG;AACH,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAA,sCAAsC,CAAC;AAEtE;;;GAGG;AACH,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,CAAA,0CAA0C,CAAC;AAE5E;;;GAGG;AACH,MAAM,cAAc,GAAG,GAAG,CAAC,OAAO,CAAA,4CAA4C,CAAC;AAE/E;;;GAGG;AACH,MAAM,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAAA,oDAAoD,CAAC;AAE3F;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;mBAIF,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;UAI1B,WAAW;UACX,WAAW;;;;UAIX,aAAa;UACb,aAAa;;;;;;;;;UASb,cAAc;;;UAGd,kBAAkB;;;UAGlB,cAAc,GAAG,kBAAkB;;;;iBAI5B,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,gBAAgB;mBACd,kBAAkB;;;mBAGlB,mBAAmB;;;mBAGnB,iBAAiB;;;mBAGjB,gBAAgB;;;mBAGhB,kBAAkB;;;mBAGlB,cAAc;;;;;;;;;;;;;;;;;;;;;CAqBhC,CAAC"}
|