ooxml-ui 0.16.0 → 0.16.2
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/{chunk-A46H2JBV.js → chunk-HSM56NH6.js} +1 -1
- package/dist/{chunk-G2ZIAXOV.js → chunk-QELTZLUJ.js} +100 -96
- package/dist/{chunk-NDEB6EBU.js → chunk-XPYONXNE.js} +4 -1
- package/dist/{chunk-VUXNXH4Q.js → chunk-YFT6FYOP.js} +1 -1
- package/dist/{chunk-VYF7LGXZ.js → chunk-YM2DT6QD.js} +1 -1
- package/dist/controls.js +4 -4
- package/dist/icons.js +2 -2
- package/dist/index.js +8 -8
- package/dist/presence.js +2 -2
- package/dist/registry.d.ts +6 -0
- package/dist/smartart.js +2 -2
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { createIconSvg, paintIcon, defineIcon } from './chunk-
|
|
2
|
-
import { initialsOf } from './chunk-
|
|
3
|
-
import { definer, attachStyles, controlCss, emit } from './chunk-
|
|
1
|
+
import { createIconSvg, paintIcon, defineIcon } from './chunk-YFT6FYOP.js';
|
|
2
|
+
import { initialsOf } from './chunk-YM2DT6QD.js';
|
|
3
|
+
import { definer, attachStyles, controlCss, present, emit } from './chunk-XPYONXNE.js';
|
|
4
4
|
import { tok, FOCUS_RING, OFFICE_TOKENS } from './chunk-4MT4OIAJ.js';
|
|
5
5
|
|
|
6
6
|
// src/chrome-controls.ts
|
|
@@ -613,13 +613,13 @@ var defineRadio = definer("office-ui-radio", () => {
|
|
|
613
613
|
return this.hasAttribute("checked");
|
|
614
614
|
}
|
|
615
615
|
set checked(next) {
|
|
616
|
-
this.toggleAttribute("checked",
|
|
616
|
+
this.toggleAttribute("checked", present(next));
|
|
617
617
|
}
|
|
618
618
|
get disabled() {
|
|
619
619
|
return this.hasAttribute("disabled");
|
|
620
620
|
}
|
|
621
621
|
set disabled(next) {
|
|
622
|
-
this.toggleAttribute("disabled",
|
|
622
|
+
this.toggleAttribute("disabled", present(next));
|
|
623
623
|
}
|
|
624
624
|
get value() {
|
|
625
625
|
return this.getAttribute("value") ?? "on";
|
|
@@ -752,7 +752,7 @@ var defineRibbonToggle = definer("office-ui-ribbon-toggle", () => {
|
|
|
752
752
|
return this.hasAttribute("checked");
|
|
753
753
|
}
|
|
754
754
|
set checked(value) {
|
|
755
|
-
this.toggleAttribute("checked",
|
|
755
|
+
this.toggleAttribute("checked", present(value));
|
|
756
756
|
}
|
|
757
757
|
sync() {
|
|
758
758
|
const label = this.getAttribute("label") ?? "";
|
|
@@ -856,7 +856,7 @@ var defineSearchField = definer("office-ui-search", () => {
|
|
|
856
856
|
return this.hasAttribute("disabled");
|
|
857
857
|
}
|
|
858
858
|
set disabled(next) {
|
|
859
|
-
this.toggleAttribute("disabled",
|
|
859
|
+
this.toggleAttribute("disabled", present(next));
|
|
860
860
|
}
|
|
861
861
|
focus(options) {
|
|
862
862
|
this.input.focus(options);
|
|
@@ -971,7 +971,7 @@ var defineBackstage = definer("office-ui-backstage", () => {
|
|
|
971
971
|
return this.hasAttribute("open");
|
|
972
972
|
}
|
|
973
973
|
set open(value) {
|
|
974
|
-
this.toggleAttribute("open",
|
|
974
|
+
this.toggleAttribute("open", present(value));
|
|
975
975
|
}
|
|
976
976
|
get selected() {
|
|
977
977
|
return this.getAttribute("selected") ?? "";
|
|
@@ -1139,7 +1139,7 @@ var defineFindBar = definer("office-ui-find-bar", () => {
|
|
|
1139
1139
|
return this.hasAttribute("open");
|
|
1140
1140
|
}
|
|
1141
1141
|
set open(value) {
|
|
1142
|
-
this.toggleAttribute("open",
|
|
1142
|
+
this.toggleAttribute("open", present(value));
|
|
1143
1143
|
}
|
|
1144
1144
|
get value() {
|
|
1145
1145
|
return this.#input.value;
|
|
@@ -1845,8 +1845,8 @@ var defineButton = definer("office-ui-button", () => {
|
|
|
1845
1845
|
button;
|
|
1846
1846
|
svg;
|
|
1847
1847
|
text;
|
|
1848
|
-
caret;
|
|
1849
|
-
badge;
|
|
1848
|
+
#caret;
|
|
1849
|
+
#badge;
|
|
1850
1850
|
constructor() {
|
|
1851
1851
|
super();
|
|
1852
1852
|
const doc = this.ownerDocument;
|
|
@@ -1859,13 +1859,13 @@ var defineButton = definer("office-ui-button", () => {
|
|
|
1859
1859
|
this.svg.classList.add("glyph");
|
|
1860
1860
|
this.text = doc.createElement("span");
|
|
1861
1861
|
this.text.className = "label";
|
|
1862
|
-
this
|
|
1863
|
-
this
|
|
1864
|
-
paintIcon(this
|
|
1865
|
-
this
|
|
1866
|
-
this
|
|
1867
|
-
this
|
|
1868
|
-
this.button.append(this.svg, this.text, this
|
|
1862
|
+
this.#caret = createIconSvg(doc);
|
|
1863
|
+
this.#caret.classList.add("caret");
|
|
1864
|
+
paintIcon(this.#caret, "chevronDown");
|
|
1865
|
+
this.#badge = doc.createElement("span");
|
|
1866
|
+
this.#badge.className = "badge";
|
|
1867
|
+
this.#badge.setAttribute("aria-hidden", "true");
|
|
1868
|
+
this.button.append(this.svg, this.text, this.#badge);
|
|
1869
1869
|
root.append(this.button);
|
|
1870
1870
|
this.button.addEventListener("keydown", (event) => {
|
|
1871
1871
|
if ((event.key === " " || event.key === "Enter") && !event.ctrlKey && !event.metaKey && !event.altKey)
|
|
@@ -1894,7 +1894,7 @@ var defineButton = definer("office-ui-button", () => {
|
|
|
1894
1894
|
return this.hasAttribute("disabled");
|
|
1895
1895
|
}
|
|
1896
1896
|
set disabled(value) {
|
|
1897
|
-
this.toggleAttribute("disabled",
|
|
1897
|
+
this.toggleAttribute("disabled", present(value));
|
|
1898
1898
|
}
|
|
1899
1899
|
get pressed() {
|
|
1900
1900
|
const value = this.getAttribute("pressed");
|
|
@@ -1908,6 +1908,10 @@ var defineButton = definer("office-ui-button", () => {
|
|
|
1908
1908
|
iconName() {
|
|
1909
1909
|
return this.getAttribute("icon");
|
|
1910
1910
|
}
|
|
1911
|
+
/** The tooltip: `title`, else the label of an icon-only button; a product may always show it. */
|
|
1912
|
+
tooltip(label, iconOnly) {
|
|
1913
|
+
return this.getAttribute("title") ?? (iconOnly ? label : "");
|
|
1914
|
+
}
|
|
1911
1915
|
/** Whether the trailing menu chevron shows. */
|
|
1912
1916
|
showsCaret() {
|
|
1913
1917
|
const caret = this.getAttribute("caret");
|
|
@@ -1917,20 +1921,20 @@ var defineButton = definer("office-ui-button", () => {
|
|
|
1917
1921
|
const label = this.getAttribute("label") ?? "";
|
|
1918
1922
|
const iconOnly = this.hasAttribute("icon-only");
|
|
1919
1923
|
this.text.textContent = label;
|
|
1920
|
-
this.text.append(this
|
|
1921
|
-
this
|
|
1924
|
+
this.text.append(this.#caret);
|
|
1925
|
+
this.#caret.toggleAttribute("hidden", !this.showsCaret());
|
|
1922
1926
|
this.text.hidden = iconOnly;
|
|
1923
1927
|
if (iconOnly && label) this.button.setAttribute("aria-label", label);
|
|
1924
1928
|
else this.button.removeAttribute("aria-label");
|
|
1925
|
-
this.button.title = this.
|
|
1929
|
+
this.button.title = this.tooltip(label, iconOnly);
|
|
1926
1930
|
this.button.disabled = this.disabled;
|
|
1927
1931
|
const shortcuts = this.getAttribute("keyshortcuts");
|
|
1928
1932
|
if (shortcuts) this.button.setAttribute("aria-keyshortcuts", shortcuts);
|
|
1929
1933
|
else this.button.removeAttribute("aria-keyshortcuts");
|
|
1930
1934
|
if (paintIcon(this.svg, this.iconName())) this.svg.setAttribute("data-painted", "");
|
|
1931
1935
|
else this.svg.removeAttribute("data-painted");
|
|
1932
|
-
this
|
|
1933
|
-
this
|
|
1936
|
+
this.#badge.textContent = this.getAttribute("badge") ?? "";
|
|
1937
|
+
this.#badge.hidden = !this.#badge.textContent;
|
|
1934
1938
|
for (const attr of ["pressed", "expanded"]) {
|
|
1935
1939
|
const value = this.getAttribute(attr);
|
|
1936
1940
|
if (value === null) this.button.removeAttribute(`aria-${attr}`);
|
|
@@ -2029,13 +2033,13 @@ function makeCheckable(role, css) {
|
|
|
2029
2033
|
return this.hasAttribute("checked");
|
|
2030
2034
|
}
|
|
2031
2035
|
set checked(value) {
|
|
2032
|
-
this.toggleAttribute("checked",
|
|
2036
|
+
this.toggleAttribute("checked", present(value));
|
|
2033
2037
|
}
|
|
2034
2038
|
get disabled() {
|
|
2035
2039
|
return this.hasAttribute("disabled");
|
|
2036
2040
|
}
|
|
2037
2041
|
set disabled(value) {
|
|
2038
|
-
this.toggleAttribute("disabled",
|
|
2042
|
+
this.toggleAttribute("disabled", present(value));
|
|
2039
2043
|
}
|
|
2040
2044
|
get value() {
|
|
2041
2045
|
return this.getAttribute("value") ?? "on";
|
|
@@ -2095,7 +2099,7 @@ var defineDialog = definer("office-ui-dialog", () => {
|
|
|
2095
2099
|
class OfficeUiDialog extends HTMLElement {
|
|
2096
2100
|
static observedAttributes = ["open", "heading"];
|
|
2097
2101
|
box;
|
|
2098
|
-
heading;
|
|
2102
|
+
#heading;
|
|
2099
2103
|
closeButton;
|
|
2100
2104
|
footer;
|
|
2101
2105
|
returnFocus = null;
|
|
@@ -2112,8 +2116,8 @@ var defineDialog = definer("office-ui-dialog", () => {
|
|
|
2112
2116
|
this.box.setAttribute("aria-modal", "true");
|
|
2113
2117
|
this.box.tabIndex = -1;
|
|
2114
2118
|
const header = doc.createElement("header");
|
|
2115
|
-
this
|
|
2116
|
-
this
|
|
2119
|
+
this.#heading = doc.createElement("h2");
|
|
2120
|
+
this.#heading.id = "title";
|
|
2117
2121
|
this.box.setAttribute("aria-labelledby", "title");
|
|
2118
2122
|
this.closeButton = doc.createElement("button");
|
|
2119
2123
|
this.closeButton.type = "button";
|
|
@@ -2122,7 +2126,7 @@ var defineDialog = definer("office-ui-dialog", () => {
|
|
|
2122
2126
|
const icon2 = createIconSvg(doc);
|
|
2123
2127
|
paintIcon(icon2, "close");
|
|
2124
2128
|
this.closeButton.append(icon2);
|
|
2125
|
-
header.append(this
|
|
2129
|
+
header.append(this.#heading, this.closeButton);
|
|
2126
2130
|
const body = doc.createElement("div");
|
|
2127
2131
|
body.className = "body";
|
|
2128
2132
|
body.append(doc.createElement("slot"));
|
|
@@ -2137,21 +2141,21 @@ var defineDialog = definer("office-ui-dialog", () => {
|
|
|
2137
2141
|
this.addEventListener("keydown", (event) => this.onKey(event));
|
|
2138
2142
|
}
|
|
2139
2143
|
attributeChangedCallback(name, old, value) {
|
|
2140
|
-
if (name === "heading") this
|
|
2144
|
+
if (name === "heading") this.#heading.textContent = value ?? "";
|
|
2141
2145
|
if (name === "open" && old === null !== (value === null)) {
|
|
2142
2146
|
if (value !== null) this.onOpen();
|
|
2143
2147
|
else this.onClose();
|
|
2144
2148
|
}
|
|
2145
2149
|
}
|
|
2146
2150
|
connectedCallback() {
|
|
2147
|
-
this
|
|
2151
|
+
this.#heading.textContent = this.getAttribute("heading") ?? "";
|
|
2148
2152
|
if (this.open) this.onOpen();
|
|
2149
2153
|
}
|
|
2150
2154
|
get open() {
|
|
2151
2155
|
return this.hasAttribute("open");
|
|
2152
2156
|
}
|
|
2153
2157
|
set open(value) {
|
|
2154
|
-
this.toggleAttribute("open",
|
|
2158
|
+
this.toggleAttribute("open", present(value));
|
|
2155
2159
|
}
|
|
2156
2160
|
show() {
|
|
2157
2161
|
this.open = true;
|
|
@@ -2936,7 +2940,7 @@ var defineMenuItem = definer("office-ui-menu-item", () => {
|
|
|
2936
2940
|
return this.hasAttribute("disabled");
|
|
2937
2941
|
}
|
|
2938
2942
|
set disabled(value) {
|
|
2939
|
-
this.toggleAttribute("disabled",
|
|
2943
|
+
this.toggleAttribute("disabled", present(value));
|
|
2940
2944
|
}
|
|
2941
2945
|
/** Focus the menuitem itself, so arrow navigation never depends on delegatesFocus. */
|
|
2942
2946
|
focus(options) {
|
|
@@ -3044,7 +3048,7 @@ var defineMenuButton = definer("office-ui-menu-button", () => {
|
|
|
3044
3048
|
return this.hasAttribute("disabled");
|
|
3045
3049
|
}
|
|
3046
3050
|
set disabled(value) {
|
|
3047
|
-
this.toggleAttribute("disabled",
|
|
3051
|
+
this.toggleAttribute("disabled", present(value));
|
|
3048
3052
|
}
|
|
3049
3053
|
get open() {
|
|
3050
3054
|
return this.caret.getAttribute("aria-expanded") === "true";
|
|
@@ -3276,7 +3280,7 @@ var defineOptionsDialog = definer("office-ui-options-dialog", () => {
|
|
|
3276
3280
|
return this.hasAttribute("open");
|
|
3277
3281
|
}
|
|
3278
3282
|
set open(value) {
|
|
3279
|
-
this.toggleAttribute("open",
|
|
3283
|
+
this.toggleAttribute("open", present(value));
|
|
3280
3284
|
}
|
|
3281
3285
|
show() {
|
|
3282
3286
|
this.open = true;
|
|
@@ -3496,13 +3500,13 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
|
|
|
3496
3500
|
"icon",
|
|
3497
3501
|
"data-open"
|
|
3498
3502
|
];
|
|
3499
|
-
caption;
|
|
3500
|
-
launcher;
|
|
3501
|
-
face;
|
|
3502
|
-
faceIcon;
|
|
3503
|
-
faceLabel;
|
|
3504
|
-
slotEl;
|
|
3505
|
-
observer;
|
|
3503
|
+
#caption;
|
|
3504
|
+
#launcher;
|
|
3505
|
+
#face;
|
|
3506
|
+
#faceIcon;
|
|
3507
|
+
#faceLabel;
|
|
3508
|
+
#slotEl;
|
|
3509
|
+
#observer;
|
|
3506
3510
|
constructor() {
|
|
3507
3511
|
super();
|
|
3508
3512
|
const doc = this.ownerDocument;
|
|
@@ -3513,19 +3517,19 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
|
|
|
3513
3517
|
group.className = "group";
|
|
3514
3518
|
const row = doc.createElement("div");
|
|
3515
3519
|
row.className = "row";
|
|
3516
|
-
this
|
|
3517
|
-
this
|
|
3518
|
-
row.append(this
|
|
3519
|
-
this
|
|
3520
|
-
this
|
|
3521
|
-
this
|
|
3522
|
-
this
|
|
3523
|
-
this
|
|
3520
|
+
this.#slotEl = doc.createElement("slot");
|
|
3521
|
+
this.#slotEl.addEventListener("slotchange", () => this.#observe());
|
|
3522
|
+
row.append(this.#slotEl);
|
|
3523
|
+
this.#caption = doc.createElement("span");
|
|
3524
|
+
this.#caption.className = "caption";
|
|
3525
|
+
this.#launcher = doc.createElement("button");
|
|
3526
|
+
this.#launcher.type = "button";
|
|
3527
|
+
this.#launcher.className = "launcher";
|
|
3524
3528
|
const glyph = createIconSvg(doc);
|
|
3525
3529
|
paintIcon(glyph, "launcher");
|
|
3526
|
-
this
|
|
3527
|
-
this
|
|
3528
|
-
if (this
|
|
3530
|
+
this.#launcher.append(glyph);
|
|
3531
|
+
this.#launcher.addEventListener("click", () => {
|
|
3532
|
+
if (this.#launcher.disabled) return;
|
|
3529
3533
|
const detail = this.launcherDetail();
|
|
3530
3534
|
if (detail)
|
|
3531
3535
|
this.dispatchEvent(
|
|
@@ -3534,36 +3538,36 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
|
|
|
3534
3538
|
});
|
|
3535
3539
|
const foot = doc.createElement("div");
|
|
3536
3540
|
foot.className = "foot";
|
|
3537
|
-
foot.append(this
|
|
3538
|
-
this
|
|
3539
|
-
this
|
|
3540
|
-
this
|
|
3541
|
-
this
|
|
3542
|
-
this
|
|
3543
|
-
this
|
|
3541
|
+
foot.append(this.#caption, this.#launcher);
|
|
3542
|
+
this.#face = doc.createElement("button");
|
|
3543
|
+
this.#face.type = "button";
|
|
3544
|
+
this.#face.className = "face";
|
|
3545
|
+
this.#face.setAttribute("aria-haspopup", "true");
|
|
3546
|
+
this.#faceIcon = createIconSvg(doc);
|
|
3547
|
+
this.#faceLabel = doc.createElement("span");
|
|
3544
3548
|
const chevron = createIconSvg(doc);
|
|
3545
3549
|
chevron.classList.add("chev");
|
|
3546
3550
|
paintIcon(chevron, "chevronDown");
|
|
3547
|
-
this
|
|
3548
|
-
this
|
|
3551
|
+
this.#face.append(this.#faceIcon, this.#faceLabel, chevron);
|
|
3552
|
+
this.#face.addEventListener(
|
|
3549
3553
|
"click",
|
|
3550
3554
|
() => this.dispatchEvent(
|
|
3551
3555
|
new CustomEvent(config3().collapseEvent, { bubbles: true, composed: true })
|
|
3552
3556
|
)
|
|
3553
3557
|
);
|
|
3554
|
-
group.append(this
|
|
3558
|
+
group.append(this.#face, row, foot);
|
|
3555
3559
|
root.append(group);
|
|
3556
3560
|
}
|
|
3557
3561
|
connectedCallback() {
|
|
3558
3562
|
this.setAttribute("role", "group");
|
|
3559
|
-
this
|
|
3560
|
-
this
|
|
3563
|
+
this.#sync();
|
|
3564
|
+
this.#observe();
|
|
3561
3565
|
}
|
|
3562
3566
|
disconnectedCallback() {
|
|
3563
|
-
this
|
|
3567
|
+
this.#observer?.disconnect();
|
|
3564
3568
|
}
|
|
3565
3569
|
attributeChangedCallback() {
|
|
3566
|
-
this
|
|
3570
|
+
this.#sync();
|
|
3567
3571
|
}
|
|
3568
3572
|
/** The launcher's event detail; null emits nothing. */
|
|
3569
3573
|
launcherDetail() {
|
|
@@ -3574,15 +3578,15 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
|
|
|
3574
3578
|
iconName() {
|
|
3575
3579
|
return this.getAttribute("icon") ?? "grid";
|
|
3576
3580
|
}
|
|
3577
|
-
observe() {
|
|
3578
|
-
this
|
|
3581
|
+
#observe() {
|
|
3582
|
+
this.#observer?.disconnect();
|
|
3579
3583
|
if (!this.isConnected) return;
|
|
3580
3584
|
const Observer = this.ownerDocument.defaultView?.ResizeObserver;
|
|
3581
|
-
if (Observer) this
|
|
3582
|
-
for (const el of this
|
|
3583
|
-
this
|
|
3585
|
+
if (Observer) this.#observer ??= new Observer(() => this.#measure());
|
|
3586
|
+
for (const el of this.#slotEl.assignedElements()) this.#observer?.observe(el);
|
|
3587
|
+
this.#measure();
|
|
3584
3588
|
}
|
|
3585
|
-
measure() {
|
|
3589
|
+
#measure() {
|
|
3586
3590
|
const children = [...this.children];
|
|
3587
3591
|
const stackable = children.filter((el) => {
|
|
3588
3592
|
const gallery = el.matches('[mode="dropdown"]') ? el : el.querySelector('[mode="dropdown"]');
|
|
@@ -3599,20 +3603,20 @@ var defineRibbonGroup = definer("office-ui-ribbon-group", () => {
|
|
|
3599
3603
|
tallest <= tokenPx(this, "--office-ribbon-compact-row-max", 36)
|
|
3600
3604
|
);
|
|
3601
3605
|
}
|
|
3602
|
-
sync() {
|
|
3606
|
+
#sync() {
|
|
3603
3607
|
const label = this.getAttribute("label") ?? "";
|
|
3604
|
-
this
|
|
3608
|
+
this.#caption.textContent = label;
|
|
3605
3609
|
this.setAttribute("aria-label", label);
|
|
3606
3610
|
const launcherLabel = this.getAttribute("launcher-label") ?? `${label} options`;
|
|
3607
|
-
this
|
|
3608
|
-
this
|
|
3609
|
-
this
|
|
3610
|
-
this
|
|
3611
|
-
this
|
|
3612
|
-
this
|
|
3613
|
-
this
|
|
3614
|
-
this
|
|
3615
|
-
paintIcon(this
|
|
3611
|
+
this.#launcher.hidden = !this.hasAttribute("launcher");
|
|
3612
|
+
this.#launcher.disabled = this.hasAttribute("launcher-disabled");
|
|
3613
|
+
this.#launcher.setAttribute("aria-label", launcherLabel);
|
|
3614
|
+
this.#launcher.title = launcherLabel;
|
|
3615
|
+
this.#faceLabel.textContent = label;
|
|
3616
|
+
this.#face.title = label;
|
|
3617
|
+
this.#face.setAttribute("aria-label", label);
|
|
3618
|
+
this.#face.setAttribute("aria-expanded", String(this.hasAttribute("data-open")));
|
|
3619
|
+
paintIcon(this.#faceIcon, this.iconName());
|
|
3616
3620
|
}
|
|
3617
3621
|
}
|
|
3618
3622
|
return OfficeUiRibbonGroup;
|
|
@@ -4001,7 +4005,7 @@ var defineSelect = definer("office-ui-select", () => {
|
|
|
4001
4005
|
return this.hasAttribute("disabled");
|
|
4002
4006
|
}
|
|
4003
4007
|
set disabled(next) {
|
|
4004
|
-
this.toggleAttribute("disabled",
|
|
4008
|
+
this.toggleAttribute("disabled", present(next));
|
|
4005
4009
|
}
|
|
4006
4010
|
focus(options) {
|
|
4007
4011
|
this.trigger.focus(options);
|
|
@@ -4481,7 +4485,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
|
|
|
4481
4485
|
in;
|
|
4482
4486
|
range;
|
|
4483
4487
|
output;
|
|
4484
|
-
fit;
|
|
4488
|
+
#fit;
|
|
4485
4489
|
constructor() {
|
|
4486
4490
|
super();
|
|
4487
4491
|
const doc = this.ownerDocument;
|
|
@@ -4501,12 +4505,12 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
|
|
|
4501
4505
|
this.range.type = "range";
|
|
4502
4506
|
this.range.setAttribute("aria-label", "Zoom");
|
|
4503
4507
|
this.output = doc.createElement("output");
|
|
4504
|
-
this
|
|
4505
|
-
this
|
|
4508
|
+
this.#fit = button("Fit", "");
|
|
4509
|
+
this.#fit.className = "fit";
|
|
4506
4510
|
const svg = createIconSvg(doc);
|
|
4507
4511
|
paintIcon(svg, "fitPage");
|
|
4508
|
-
this
|
|
4509
|
-
root.append(this.out, this.range, this.in, this.output, this
|
|
4512
|
+
this.#fit.append(svg);
|
|
4513
|
+
root.append(this.out, this.range, this.in, this.output, this.#fit);
|
|
4510
4514
|
this.out.addEventListener("click", () => this.stepBy(-1));
|
|
4511
4515
|
this.in.addEventListener("click", () => this.stepBy(1));
|
|
4512
4516
|
this.range.addEventListener("input", () => this.commit(this.range.valueAsNumber, "input"));
|
|
@@ -4514,7 +4518,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
|
|
|
4514
4518
|
"change",
|
|
4515
4519
|
() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true }))
|
|
4516
4520
|
);
|
|
4517
|
-
this
|
|
4521
|
+
this.#fit.addEventListener(
|
|
4518
4522
|
"click",
|
|
4519
4523
|
() => emit(this, "office-command", { command: "zoom-fit" })
|
|
4520
4524
|
);
|
|
@@ -4542,7 +4546,7 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
|
|
|
4542
4546
|
return this.hasAttribute("disabled");
|
|
4543
4547
|
}
|
|
4544
4548
|
set disabled(value) {
|
|
4545
|
-
this.toggleAttribute("disabled",
|
|
4549
|
+
this.toggleAttribute("disabled", present(value));
|
|
4546
4550
|
}
|
|
4547
4551
|
/** Office buttons snap to the next multiple of `step`, so 67% steps to 70%, not 77%. */
|
|
4548
4552
|
stepBy(direction) {
|
|
@@ -4572,9 +4576,9 @@ var defineZoomSlider = definer("office-ui-zoom-slider", () => {
|
|
|
4572
4576
|
this.in.disabled = disabled || value >= max;
|
|
4573
4577
|
this.range.disabled = disabled;
|
|
4574
4578
|
const fit = this.getAttribute("fit");
|
|
4575
|
-
this
|
|
4576
|
-
this
|
|
4577
|
-
this
|
|
4579
|
+
this.#fit.disabled = disabled;
|
|
4580
|
+
this.#fit.setAttribute("aria-label", fit || "Fit");
|
|
4581
|
+
this.#fit.title = fit || "Fit";
|
|
4578
4582
|
}
|
|
4579
4583
|
}
|
|
4580
4584
|
return OfficeUiZoomSlider;
|
|
@@ -32,6 +32,9 @@ function emit(host, type, detail, cancelable = false) {
|
|
|
32
32
|
new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable })
|
|
33
33
|
);
|
|
34
34
|
}
|
|
35
|
+
function present(value) {
|
|
36
|
+
return value === "" || Boolean(value);
|
|
37
|
+
}
|
|
35
38
|
|
|
36
39
|
// src/styles.ts
|
|
37
40
|
var sheetsByDocument = /* @__PURE__ */ new WeakMap();
|
|
@@ -72,4 +75,4 @@ var COMMON_CONTROL_CSS = `
|
|
|
72
75
|
var controlCss = (css) => `${COMMON_CONTROL_CSS}
|
|
73
76
|
${css}`;
|
|
74
77
|
|
|
75
|
-
export { CONTRACT_REVISION, attachStyles, controlCss, definer, emit };
|
|
78
|
+
export { CONTRACT_REVISION, attachStyles, controlCss, definer, emit, present };
|
package/dist/controls.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-
|
|
2
|
-
export { defineIcon } from './chunk-
|
|
3
|
-
import './chunk-
|
|
4
|
-
import './chunk-
|
|
1
|
+
export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-QELTZLUJ.js';
|
|
2
|
+
export { defineIcon } from './chunk-YFT6FYOP.js';
|
|
3
|
+
import './chunk-YM2DT6QD.js';
|
|
4
|
+
import './chunk-XPYONXNE.js';
|
|
5
5
|
import './chunk-4MT4OIAJ.js';
|
package/dist/icons.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-
|
|
2
|
-
import './chunk-
|
|
1
|
+
export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-YFT6FYOP.js';
|
|
2
|
+
import './chunk-XPYONXNE.js';
|
|
3
3
|
import './chunk-4MT4OIAJ.js';
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { installOfficeUiTheme } from './chunk-F4TM7U4P.js';
|
|
2
2
|
export { THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme } from './chunk-F4TM7U4P.js';
|
|
3
|
-
import { registerControls } from './chunk-
|
|
4
|
-
export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-
|
|
5
|
-
export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-
|
|
6
|
-
import { definePresence } from './chunk-
|
|
7
|
-
export { definePresence, initialsOf, participantsFromAwareness } from './chunk-
|
|
8
|
-
import { defineSmartArt } from './chunk-
|
|
9
|
-
export { defineSmartArt, renderDiagramDrawing } from './chunk-
|
|
10
|
-
export { CONTRACT_REVISION } from './chunk-
|
|
3
|
+
import { registerControls } from './chunk-QELTZLUJ.js';
|
|
4
|
+
export { CONTROL_DEFINERS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_TOAST_VISIBLE_LIMIT, attachKeyTips, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, defineAccount, defineBackstage, defineButton, defineCheckbox, defineCommandSearch, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonGroup, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineTabStrip, defineToasts, defineToolbar, defineZoomSlider, nextEnabledIndex, profileInitials, readOfficeProfile, registerControls, rulerDivisions, sanitizeOfficeProfile, typeAheadIndex, writeOfficeProfile } from './chunk-QELTZLUJ.js';
|
|
5
|
+
export { ICON_CSS, createIconSvg, defineIcon, getIcon, listIcons, paintIcon, registerIcon } from './chunk-YFT6FYOP.js';
|
|
6
|
+
import { definePresence } from './chunk-YM2DT6QD.js';
|
|
7
|
+
export { definePresence, initialsOf, participantsFromAwareness } from './chunk-YM2DT6QD.js';
|
|
8
|
+
import { defineSmartArt } from './chunk-HSM56NH6.js';
|
|
9
|
+
export { defineSmartArt, renderDiagramDrawing } from './chunk-HSM56NH6.js';
|
|
10
|
+
export { CONTRACT_REVISION } from './chunk-XPYONXNE.js';
|
|
11
11
|
export { COMPACT, FOCUS_RING, OFFICE_TOKENS, TOUCH, tok } from './chunk-4MT4OIAJ.js';
|
|
12
12
|
|
|
13
13
|
// src/index.ts
|
package/dist/presence.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { definePresence, initialsOf, participantsFromAwareness } from './chunk-
|
|
2
|
-
import './chunk-
|
|
1
|
+
export { definePresence, initialsOf, participantsFromAwareness } from './chunk-YM2DT6QD.js';
|
|
2
|
+
import './chunk-XPYONXNE.js';
|
|
3
3
|
import './chunk-4MT4OIAJ.js';
|
package/dist/registry.d.ts
CHANGED
|
@@ -16,3 +16,9 @@ export declare function browserRegistry(): CustomElementRegistry | undefined;
|
|
|
16
16
|
export declare function definer(tag: string, make: () => CustomElementConstructor): Definer;
|
|
17
17
|
/** Bubbling, composed event: crosses shadow boundaries like the native ones do. */
|
|
18
18
|
export declare function emit<T>(host: HTMLElement, type: string, detail: T, cancelable?: boolean): boolean;
|
|
19
|
+
/**
|
|
20
|
+
* A boolean property value as its attribute would read it: `''` means present, as in
|
|
21
|
+
* `checked=""`. Frameworks that pass attribute idioms through properties (Svelte's
|
|
22
|
+
* `checked={on ? '' : undefined}`) therefore keep working.
|
|
23
|
+
*/
|
|
24
|
+
export declare function present(value: unknown): boolean;
|
package/dist/smartart.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { defineSmartArt, renderDiagramDrawing } from './chunk-
|
|
2
|
-
import './chunk-
|
|
1
|
+
export { defineSmartArt, renderDiagramDrawing } from './chunk-HSM56NH6.js';
|
|
2
|
+
import './chunk-XPYONXNE.js';
|
|
3
3
|
import './chunk-4MT4OIAJ.js';
|