ooxml-ui 1.6.2 → 1.8.0
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/README.md +90 -37
- package/custom-elements.json +303 -4
- package/dist/chrome/ruler.d.ts +7 -1
- package/dist/chrome/ruler.d.ts.map +1 -1
- package/dist/chrome/status-bar.d.ts.map +1 -1
- package/dist/chrome/tab-strip.d.ts +3 -1
- package/dist/chrome/tab-strip.d.ts.map +1 -1
- package/dist/chrome/task-pane.d.ts +29 -0
- package/dist/chrome/task-pane.d.ts.map +1 -0
- package/dist/chrome/title-bar.d.ts +2 -1
- package/dist/chrome/title-bar.d.ts.map +1 -1
- package/dist/{chunk-QAIVGTQZ.js → chunk-7US5GCXF.js} +158 -153
- package/dist/{chunk-Z7CS3UUK.js → chunk-KF72ZA6V.js} +5 -2
- package/dist/{chunk-QHAE6Y5B.js → chunk-O7APCA5N.js} +680 -98
- package/dist/chunk-W6AV3GHC.js +112 -0
- package/dist/controls.d.ts +9 -2
- package/dist/controls.d.ts.map +1 -1
- package/dist/controls.js +1 -1
- package/dist/dialog/dialog-footer.d.ts.map +1 -1
- package/dist/dialog/options-dialog.d.ts.map +1 -1
- package/dist/docx/editor-core.d.ts +3 -0
- package/dist/docx/editor-shell.d.ts +2 -0
- package/dist/docx/element-api.d.ts +7 -0
- package/dist/docx/events.d.ts +4 -1
- package/dist/docx/index.d.ts +1 -0
- package/dist/docx/ribbon-color-grid.d.ts +3 -4
- package/dist/docx.js +46 -78
- package/dist/edit-worker.js +52 -3
- package/dist/form/color-custom.d.ts +79 -0
- package/dist/form/color-custom.d.ts.map +1 -0
- package/dist/form/color-grid.d.ts +125 -0
- package/dist/form/color-grid.d.ts.map +1 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +4 -3
- package/dist/menu/context-menu.d.ts.map +1 -1
- package/dist/menu/menu-button.d.ts +2 -1
- package/dist/menu/menu-button.d.ts.map +1 -1
- package/dist/notices/paste-options.d.ts.map +1 -1
- package/dist/notices/toasts.d.ts.map +1 -1
- package/dist/pptx/{chart-3d-view-scene-ERX2GRCD.mjs → chart-3d-view-scene-P6MAFEGL.mjs} +2 -2
- package/dist/pptx/{chart-3d-view-scene-55WDENSO.cjs → chart-3d-view-scene-V74F7ZOC.cjs} +38 -38
- package/dist/pptx/{chunk-G2YUKLRX.cjs → chunk-526IHNIH.cjs} +1 -1
- package/dist/pptx/{chunk-SVN6OBG4.mjs → chunk-DPOES4WM.mjs} +26 -11
- package/dist/pptx/{chunk-BLAJIEXA.cjs → chunk-GCS5KBMR.cjs} +511 -653
- package/dist/pptx/{chunk-RPRC2EG5.cjs → chunk-K3S2A64B.cjs} +13 -13
- package/dist/pptx/{chunk-E55NU4BF.mjs → chunk-MCHPNO42.mjs} +289 -493
- package/dist/pptx/{chunk-AWQRQUPL.mjs → chunk-NAFUYAQP.mjs} +1 -1
- package/dist/pptx/{chunk-LCIXR7WE.cjs → chunk-VFPVEVF4.cjs} +26 -11
- package/dist/pptx/{chunk-TKATCPOK.mjs → chunk-ZAOYPCAM.mjs} +1 -1
- package/dist/pptx/dom/activex-controls-overlay.d.ts.map +1 -1
- package/dist/pptx/dom/elements/image.d.ts.map +1 -1
- package/dist/pptx/dom/elements/media.d.ts.map +1 -1
- package/dist/pptx/dom/elements/text-block.d.ts.map +1 -1
- package/dist/pptx/dom/elements/zoom.d.ts.map +1 -1
- package/dist/pptx/dom/index.cjs +252 -247
- package/dist/pptx/dom/index.mjs +11 -6
- package/dist/pptx/export/html2canvas-clone.cjs +2 -2
- package/dist/pptx/export/html2canvas-clone.mjs +1 -1
- package/dist/pptx/index.cjs +3059 -3023
- package/dist/pptx/index.mjs +4 -4
- package/dist/pptx/render/chart-combo-series.d.ts.map +1 -1
- package/dist/pptx/render/chart-combo-stock.cjs +3 -3
- package/dist/pptx/render/chart-combo-stock.mjs +1 -1
- package/dist/pptx/render/chart-marker-shape.d.ts.map +1 -1
- package/dist/pptx/render/chart-overlays.cjs +7 -7
- package/dist/pptx/render/chart-overlays.mjs +1 -1
- package/dist/pptx/render/chart-surface-treemap.cjs +4 -4
- package/dist/pptx/render/chart-surface-treemap.mjs +1 -1
- package/dist/pptx/render/chart-view-model.cjs +44 -44
- package/dist/pptx/render/chart-view-model.mjs +1 -1
- package/dist/pptx/render/chart-waterfall-map.cjs +6 -6
- package/dist/pptx/render/chart-waterfall-map.mjs +1 -1
- package/dist/pptx/render/connector-router-types.d.ts +4 -52
- package/dist/pptx/render/connector-router-types.d.ts.map +1 -1
- package/dist/pptx/render/connector-router.d.ts +4 -32
- package/dist/pptx/render/connector-router.d.ts.map +1 -1
- package/dist/pptx/render/editor-keymap-arrows.d.ts +0 -7
- package/dist/pptx/render/editor-keymap-arrows.d.ts.map +1 -1
- package/dist/pptx/render/element-interaction.d.ts +2 -6
- package/dist/pptx/render/element-interaction.d.ts.map +1 -1
- package/dist/pptx/render/index.d.ts +1 -0
- package/dist/pptx/render/index.d.ts.map +1 -1
- package/dist/pptx/render/ribbon-add-ins.d.ts +53 -0
- package/dist/pptx/render/ribbon-add-ins.d.ts.map +1 -0
- package/dist/pptx/web-components/index.d.ts +1 -0
- package/dist/pptx/web-components/index.d.ts.map +1 -1
- package/dist/pptx/web-components/ribbon-add-in.d.ts +20 -0
- package/dist/pptx/web-components/ribbon-add-in.d.ts.map +1 -0
- package/dist/ribbon/add-in-tabs.d.ts +36 -0
- package/dist/ribbon/group-overflow.d.ts +37 -0
- package/dist/ribbon/group-overflow.d.ts.map +1 -0
- package/dist/ribbon/ribbon-tabs.d.ts.map +1 -1
- package/dist/teams/app/index.d.ts +1 -1
- package/dist/teams.js +2 -2
- package/dist/visio/format-pane-fields.d.ts +42 -0
- package/dist/visio/format-pane-view.d.ts +44 -0
- package/dist/visio/index.d.ts +1 -0
- package/dist/visio/page-setup-action.d.ts +4 -0
- package/dist/visio/ribbon-action.d.ts +20 -7
- package/dist/visio/ribbon-change-shape.d.ts +17 -6
- package/dist/visio/ribbon-color-menu.d.ts +29 -0
- package/dist/visio/ribbon-inline-galleries.d.ts +20 -0
- package/dist/visio/ribbon-overflow.d.ts +7 -0
- package/dist/visio/ribbon-review.d.ts +5 -2
- package/dist/visio/ribbon-router.d.ts +3 -3
- package/dist/visio/ribbon-shape-styles.d.ts +4 -1
- package/dist/visio/ribbon-style-options.d.ts +4 -3
- package/dist/visio/ribbon.d.ts +2 -2
- package/dist/visio/shapes-document.d.ts +29 -0
- package/dist/visio/shapes-sections.d.ts +19 -5
- package/dist/visio/shapes-storage.d.ts +15 -0
- package/dist/visio/shapes-window.d.ts +9 -2
- package/dist/visio/status-bar.d.ts +7 -4
- package/dist/visio/stencil-catalog.d.ts +4 -0
- package/dist/visio/styles/theme.d.ts +1 -1
- package/dist/visio/styles.d.ts +1 -1
- package/dist/visio/text-measurer.d.ts +25 -0
- package/dist/visio/title-bar.d.ts +9 -0
- package/dist/visio/viewer-auto-connect-parts.d.ts +12 -0
- package/dist/visio/viewer-auto-connect.d.ts +33 -0
- package/dist/visio/viewer-backstage.d.ts +2 -1
- package/dist/visio/viewer-canvas.d.ts +1 -1
- package/dist/visio/viewer-change-shape.d.ts +8 -4
- package/dist/visio/viewer-chrome.d.ts +13 -5
- package/dist/visio/viewer-color-menus.d.ts +34 -0
- package/dist/visio/viewer-commands.d.ts +4 -1
- package/dist/visio/viewer-connector-tool.d.ts +5 -3
- package/dist/visio/viewer-data-window.d.ts +5 -1
- package/dist/visio/viewer-draw-tool.d.ts +1 -11
- package/dist/visio/viewer-element.d.ts +16 -0
- package/dist/visio/viewer-format-pane.d.ts +26 -0
- package/dist/visio/viewer-guides.d.ts +7 -4
- package/dist/visio/viewer-inline-text.d.ts +31 -0
- package/dist/visio/viewer-input.d.ts +5 -1
- package/dist/visio/viewer-layer-properties.d.ts +18 -0
- package/dist/visio/viewer-layout-commands.d.ts +8 -2
- package/dist/visio/viewer-more-colors.d.ts +16 -0
- package/dist/visio/viewer-options.d.ts +18 -4
- package/dist/visio/viewer-page-setup.d.ts +6 -0
- package/dist/visio/viewer-ruler-grid.d.ts +25 -0
- package/dist/visio/viewer-ruler.d.ts +11 -3
- package/dist/visio/viewer-snap-glue.d.ts +23 -0
- package/dist/visio/viewer-stencil.d.ts +4 -1
- package/dist/visio.js +7595 -5944
- package/dist/xlsx/component.d.ts +8 -0
- package/dist/xlsx/dialogs/format-cells/color-swatches.d.ts +4 -2
- package/dist/xlsx/dialogs/styles.d.ts +1 -1
- package/dist/xlsx/events.d.ts +4 -1
- package/dist/xlsx/index.d.ts +1 -0
- package/dist/xlsx/ribbon/color-grid.d.ts +25 -7
- package/dist/xlsx/ribbon/ribbon.d.ts +3 -0
- package/dist/xlsx.js +121 -163
- package/package.json +3 -2
- package/dist/pptx/render/connector-router-astar.d.ts +0 -24
- package/dist/pptx/render/connector-router-astar.d.ts.map +0 -1
- package/dist/pptx/render/connector-router-graph.d.ts +0 -38
- package/dist/pptx/render/connector-router-graph.d.ts.map +0 -1
- package/dist/visio/format-shape-dialog.d.ts +0 -21
- package/dist/visio/viewer-edit-controls.d.ts +0 -12
- package/dist/visio/viewer-format-shape.d.ts +0 -16
- package/dist/visio/viewer-geometry-controls.d.ts +0 -14
- package/dist/visio/viewer-layer-controls.d.ts +0 -5
- package/dist/visio/viewer-paint-dialog.d.ts +0 -28
- package/dist/visio/viewer-paint-properties.d.ts +0 -13
package/README.md
CHANGED
|
@@ -36,7 +36,7 @@ stylesheet imported as `?raw`, tokens only). The folders are `form/` (checkbox,
|
|
|
36
36
|
search, zoom), `ribbon/` (button, group, stack, toolbar, tabs, section, toggle), `menu/` (menu button
|
|
37
37
|
and item, separator, context menu, command search), `dialog/` (dialog, options dialog, dialog footer),
|
|
38
38
|
`notices/` (toasts, read-only banner, paste options), `chrome/` (title bar, status bar and item, tab
|
|
39
|
-
strip, backstage, account, find bar, print preview, ruler), `comments/` (the comments pane), `presence/`,
|
|
39
|
+
strip, task pane, backstage, account, find bar, print preview, ruler), `comments/` (the comments pane), `presence/`,
|
|
40
40
|
`smartart/` and `teams/`.
|
|
41
41
|
|
|
42
42
|
- **`OfficeElement`** (`base.ts`) is the base class, exported for products that build their own
|
|
@@ -134,42 +134,44 @@ panel beside the parent, with viewport edge placement. ArrowLeft or Escape
|
|
|
134
134
|
returns focus to its trigger; choosing a command closes the whole menu tree.
|
|
135
135
|
Arrow navigation stays within the current menu and skips disabled entries.
|
|
136
136
|
|
|
137
|
-
| Tag | Attributes / properties
|
|
138
|
-
| ----------------------------------------------------- |
|
|
139
|
-
| `office-ui-button` | `label`, `icon`, `command`, `disabled`, `pressed`, `expanded`, `icon-only`, `variant="stacked"`, `keyshortcuts`
|
|
140
|
-
| `office-ui-checkbox`, `office-ui-switch` | `checked`, `disabled`, `value`, `aria-label`; form-associated
|
|
141
|
-
| `office-ui-select` | `<option>` / `<optgroup>` children (`data-display-label`, `data-description`, font previews) or the `options` property `[{ value, label, disabled? }]`; `value`, `selectedIndex`, `disabled`, `aria-label`, `variant="ribbon-font"
|
|
142
|
-
| `office-ui-ribbon-group` | `label`, `launcher` (dialog launcher command), `launcher-disabled`; default slot
|
|
143
|
-
| `office-ui-ribbon-stack` | `orientation="horizontal"`; default slot (three-row column of small commands by default)
|
|
144
|
-
| `office-ui-menu-button` / `-menu-item` | button: `label`, `icon`, `command` (split button), `variant`, `disabled`, `keyshortcuts`; item: `command`, `label`, `icon`, `disabled`, `checked`
|
|
145
|
-
| `office-ui-toolbar` | `aria-label`, `aria-orientation`; arrow-key focus movement
|
|
146
|
-
| `office-ui-dialog` | `open`, `heading`, `dismissible="false"`, `show()`, `close()`; slots default, `footer`
|
|
147
|
-
| `office-ui-status-bar` / `-status-item` | `label`, `value`, `interactive`, `id`; controlled bar: `state` `{ items?, toggles?, views?, zoom? }` with `summary`, `collaboration` and `end` slots
|
|
148
|
-
| `office-ui-zoom-slider` | `value` (percent), `min`, `max`, `step`, `disabled`, `fit` (fit button name), `label`
|
|
149
|
-
| `office-ui-
|
|
150
|
-
| `office-ui-
|
|
151
|
-
| `office-ui-
|
|
152
|
-
| `office-ui-
|
|
153
|
-
| `office-ui-
|
|
154
|
-
| `office-ui-
|
|
155
|
-
| `office-ui-
|
|
156
|
-
| `office-ui-
|
|
157
|
-
| `office-ui-
|
|
158
|
-
| `office-ui-
|
|
159
|
-
| `office-ui-
|
|
160
|
-
| `office-ui-
|
|
161
|
-
| `office-ui-
|
|
162
|
-
| `office-ui-
|
|
163
|
-
| `office-ui-
|
|
164
|
-
| `office-ui-
|
|
165
|
-
| `office-ui-
|
|
166
|
-
| `office-ui-
|
|
167
|
-
| `office-ui-
|
|
168
|
-
| `office-ui-
|
|
169
|
-
| `office-ui-
|
|
170
|
-
| `office-ui-
|
|
171
|
-
| `office-ui-
|
|
172
|
-
| `office-ui-
|
|
137
|
+
| Tag | Attributes / properties | Events (all bubble, composed) |
|
|
138
|
+
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
139
|
+
| `office-ui-button` | `label`, `icon`, `command`, `disabled`, `pressed`, `expanded`, `icon-only`, `variant="stacked"`, `keyshortcuts` | `office-command` `{ command }` |
|
|
140
|
+
| `office-ui-checkbox`, `office-ui-switch` | `checked`, `disabled`, `value`, `aria-label`; form-associated | `input`, `change` |
|
|
141
|
+
| `office-ui-select` | `<option>` / `<optgroup>` children (`data-display-label`, `data-description`, font previews) or the `options` property `[{ value, label, disabled? }]`; `value`, `selectedIndex`, `disabled`, `aria-label`, `variant="ribbon-font" | "ribbon-icon"`, `data-font-picker`; `icon`and`custom` slots; arrows, Home, End, PageUp/PageDown, typeahead | `input`, `change` |
|
|
142
|
+
| `office-ui-ribbon-group` | `label`, `launcher` (dialog launcher command), `launcher-disabled`; default slot | launcher: `office-command` `{ command }` |
|
|
143
|
+
| `office-ui-ribbon-stack` | `orientation="horizontal"`; default slot (three-row column of small commands by default) | none |
|
|
144
|
+
| `office-ui-menu-button` / `-menu-item` | button: `label`, `icon`, `command` (split button), `variant`, `disabled`, `keyshortcuts`; item: `command`, `label`, `icon`, `disabled`, `checked` | item choice: `office-command` `{ command }` |
|
|
145
|
+
| `office-ui-toolbar` | `aria-label`, `aria-orientation`; arrow-key focus movement | none |
|
|
146
|
+
| `office-ui-dialog` | `open`, `heading`, `dismissible="false"`, `show()`, `close()`; slots default, `footer` | `office-dialog-close` `{ reason }` (cancelable) |
|
|
147
|
+
| `office-ui-status-bar` / `-status-item` | `label`, `value`, `interactive`, `id`; controlled bar: `state` `{ items?, toggles?, views?, zoom? }` with `summary`, `collaboration` and `end` slots | `office-status-activate` `{ id }` |
|
|
148
|
+
| `office-ui-zoom-slider` | `value` (percent), `min`, `max`, `step`, `disabled`, `fit` (fit button name), `label` | `input`, `change`; fit: `office-command` `{ command: 'zoom-fit' }` |
|
|
149
|
+
| `office-ui-color-grid` | Office's colour picker body: `themeColors` (ten base colours; Theme Colors grid with lighter and darker variants), `themeNames` (a product's own column names), `variantLabel` (names a variant swatch, for a translated product), `extraColors` (one more theme-bound row), `standardColors`, `recentColors`, `value`, `none-label`, `automatic-label`, `more-label`, `label`, `disabled`; events `office-color-pick` `{ color, source, label, theme?, index? }` (a theme swatch reports its column and variant so a product can save a theme reference) and `office-color-more`. The palette maths is `ooxml-core/color` (`buildThemePalette`) |
|
|
150
|
+
| `office-ui-color-custom` | The Custom tab of Office's Colors dialog: a hue and saturation square, a luminance slider, Hex, Red/Green/Blue and Hue/Sat/Lum fields (0-255) and New over Current swatches. `value` (`#rrggbb`), `current`, `label`, `disabled`, `valid`; event `office-color-change` `{ color }` |
|
|
151
|
+
| `office-ui-tab-strip` | `tabs` `[{ id, label, title? }]`, `selected`, `label`, `previous-label`, `next-label`, `add-label`, `add-disabled`, `add-title`, `disabled` | `office-tab-select` `{ id }` (cancelable); add: `office-command` `{ command: 'tab-add' }` |
|
|
152
|
+
| `office-ui-context-menu` / `office-ui-menu-separator` | Children mode: `label`, `openAt(x, y)`, `close()`, `open` over `office-ui-menu-item` and separator children. Controlled mode: `state` `{ x, y, label, items: [{ id, label, separatorBefore?, heading?, danger?, disabled?, checked?, icon? }], markers?, zIndex?, autoFocus? }`; arrows, Home, End and type-ahead in both | children: item `office-command` `{ command }`; controlled: `office-menu-request` `{ id }`, `office-menu-close` `{ reason }` (never closes itself) |
|
|
153
|
+
| `office-ui-command-search` | `commands` `[{ id, label, keywords?, description?, disabled?, title? }]`, `placeholder`, `label`, `limit` (Office's "Tell me what you want to do") | choice: `office-command` `{ command }` |
|
|
154
|
+
| `office-ui-options-dialog` | `categories` `[{ id, label, description?, disabled?, sections: [{ id, title, controls }] }]` (controls: `toggle`, `select`, `number`, `text`, each optionally `disabled` with a reason), `values`, `category`, `open`, `heading`, `show()`, `close()` | OK: `office-options-change` `{ values, changed }` |
|
|
155
|
+
| `office-ui-account` | `profile` `{ displayName, avatarColor, initial? }`; slots `sign-in` and default (product sections) | `office-profile-change` `{ profile }` |
|
|
156
|
+
| `office-ui-ribbon` | Tab row over tab panels. Panels are children with `data-ribbon-tab`, `data-label`, optional `data-tab-keytip`; slots `quick-access`, `search`, `end`, `actions` (right end of the tab row); `selected`, `label`, `file-label`, `no-file`, `file-expanded`, `file-keytip`; `focusFile()`, `focusTab()` | `office-ribbon-select` `{ tab }` (cancelable), `office-ribbon-file` |
|
|
157
|
+
| `office-ui-backstage` | `items` `[{ id, label, group?: 'footer', disabled?, title? }]`, `open`, `selected`, `label`, `back-label`, `show(page?)`, `close()`; pages are children with `data-backstage-page` | `office-backstage-select` `{ id }` (cancelable), `office-backstage-close` `{ reason }` (cancelable) |
|
|
158
|
+
| `office-ui-find-bar` | `open`, `label`, `input-label`, `placeholder`, `maxlength`, `disabled`, `navigation-disabled`, `previous-label`, `next-label`, `close-label`; `value`, `status`, `statusTitle`, `show()`, `close()` | `office-find-input` `{ query }`, `office-find-step` `{ direction }`, `office-find-close` |
|
|
159
|
+
| `office-ui-ruler` | `orientation="vertical"`, `origin` (px offset of zero), `scale` (px per unit, default 96), `direction="reverse"`; decorative | none |
|
|
160
|
+
| `office-ui-print-preview` | `pages` (rendered nodes; an inert clone of the current one is shown), `index`, `label`, `empty-label` | `office-print-preview-page` `{ index }` |
|
|
161
|
+
| `office-ui-radio` | `checked`, `disabled`, `value`, `name`; radios of one tag sharing a `name` form a roving-focus group; form-associated | `input`, `change` |
|
|
162
|
+
| `office-ui-search` | `value`, `placeholder`, `disabled`, `aria-label`, `variant="titlebar"`; `focus()`, `select()` | `input`, `change` |
|
|
163
|
+
| `office-ui-ribbon-toggle` | `label`, `checked`, `disabled`, `title`, `command` (a labelled ribbon checkbox row; static `checkboxTag` picks the inner checkbox) | `office-toggle` `{ command, checked }` |
|
|
164
|
+
| `office-ui-dialog-footer` | `state` `{ actions: [{ id, label, variant?, icon?, disabled?, busy?, title?, align?, testId? }] }`, `focusAction(id)` | `office-dialog-footer-request` `{ id }` |
|
|
165
|
+
| `office-ui-toasts` | `state` `{ toasts: [{ id, code?, severity, message }], overflowCount?, labels? }`; hidden when empty, host positions it | `office-toasts-request` `{ id: 'dismiss', toastId }` or `{ id: 'dismissAll' }` |
|
|
166
|
+
| `office-ui-read-only-banner` | `state` `{ kind, message, passwordPromptOpen?, passwordError?, checkingPassword?, labels? }` | `office-read-only-request` (Edit anyway, Dismiss, password submit or cancel) |
|
|
167
|
+
| `office-ui-paste-options` | `state` `{ left, top, options: [{ id, label }], label? }`; fixed 4px past the pasted object | `office-paste-options-request` `{ format }`, `office-paste-options-dismiss` |
|
|
168
|
+
| `office-ui-title-bar` | `state` `{ appMark?, fileName, status?, tone?, autosave?, quickAccess?: { label, items, showLabels? }, search? }`, `placement` (`titleBar`, `belowRibbon`); slots `collaboration`, `account`; tokens `--office-title-bar-*` | `office-autosave-toggle`, `office-command` `{ command }`, `office-command-search` `{ query, command? }` |
|
|
169
|
+
| `office-ui-ribbon-section` | `groups` `[{ id, label, commands: [{ id, label, icon, title?, size?, badge?, disabled?, active?, compact?, hidden?, caret?, pressed?, expanded?, column? }] }]`; keyed groups and commands in the light DOM | the commands' own events (`office-command`) |
|
|
170
|
+
| `office-ui-gallery` | `state` `{ id, label, moreLabel?, disabled?, command?, sections: [{ title?, columns, tileWidth, tileHeight, items: [{ id, label, applied?, preview? }] }], inline? }`, `mode` (`inline`), `chevron-only`, `icon`; `open`, `disabled`, `close()`; tiles in light DOM (`data-gallery-item`), previews parsed by `parseSvgPreview` | `office-gallery-pick` `{ gallery, itemId }` |
|
|
171
|
+
| `office-ui-comments-pane` | `threads` `[{ id, anchorLabel?, resolved, comments: [{ id, author, initials?, color?, created?, text, edited? }] }]`, `activeThreadId`, `read-only` (controls disabled), `list-only` (navigation list only), `closable`, `add-disabled`, `currentAuthor` (may edit own comments), `labels` (every string), `classNames` (`{ thread?, comment? }` product hook classes), `locale`; arrows, Home and End between threads, Enter or Space selects | `comment-add` `{ text }`, `comment-reply` `{ threadId, text }`, `comment-edit` `{ threadId, commentId, text }`, `comment-delete` `{ threadId, commentId }`, `thread-resolve` / `thread-reopen` / `thread-select` `{ threadId }`, `comments-close` |
|
|
172
|
+
| `office-ui-presence` | `participants`, `max`, `label` | `office-presence-select` `{ id }` |
|
|
173
|
+
| `office-ui-smartart` | `drawing` (core `DiagramDrawing`), `schemeColors`, `label` | `office-smartart-render` (render report) |
|
|
174
|
+
| `office-ui-icon` | `name`, `label` | none |
|
|
173
175
|
|
|
174
176
|
The local profile behind `office-ui-account` is stored on the device only, under one suite-wide
|
|
175
177
|
key (`readOfficeProfile`, `writeOfficeProfile`, `clearOfficeProfile`), so every Office viewer on
|
|
@@ -186,6 +188,57 @@ Setting a property never emits an event; only user activation does. Controls hon
|
|
|
186
188
|
`prefers-color-scheme`, `forced-colors: active` (system colours and a visible focus ring) and
|
|
187
189
|
coarse pointers (44px targets through `--office-target-size`).
|
|
188
190
|
|
|
191
|
+
## Ribbon add-in tabs
|
|
192
|
+
|
|
193
|
+
A host application can add its own ribbon tabs after a product's tabs, as an
|
|
194
|
+
Office add-in does (the ACROBAT tab in Visio and Excel). The tab is plain data,
|
|
195
|
+
and the same descriptor works in every editor: `ribbonAddIns` is a property of
|
|
196
|
+
`<visio-viewer>`, `<xlsx-editor>` and `<docx-editor>` and a prop of each of their
|
|
197
|
+
framework bindings, and a prop of the five PowerPoint viewers (which draw their
|
|
198
|
+
own ribbon; see `pptx-ui-ribbon-add-in` and `viewers/pptx/docs/guide/customization.md`).
|
|
199
|
+
|
|
200
|
+
```ts
|
|
201
|
+
import type { RibbonAddInTab } from 'ooxml-ui';
|
|
202
|
+
|
|
203
|
+
const tab: RibbonAddInTab = {
|
|
204
|
+
id: 'reports',
|
|
205
|
+
label: 'Reports',
|
|
206
|
+
groups: [
|
|
207
|
+
{
|
|
208
|
+
label: 'Export',
|
|
209
|
+
commands: [
|
|
210
|
+
{ id: 'export', label: 'Export', icon: 'save', run: () => exportReport() },
|
|
211
|
+
{ id: 'options', label: 'Options', icon: 'settings', size: 'small' },
|
|
212
|
+
{ id: 'send', label: 'Send', items: [{ id: 'send-mail', label: 'By mail' }] },
|
|
213
|
+
],
|
|
214
|
+
},
|
|
215
|
+
],
|
|
216
|
+
};
|
|
217
|
+
editor.ribbonAddIns = [tab];
|
|
218
|
+
editor.addEventListener('office-ribbon-add-in', (event) => {
|
|
219
|
+
const { tab, command } = event.detail; // 'reports', 'export'
|
|
220
|
+
});
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
- A command runs its `run` callback and then dispatches the bubbling, composed
|
|
224
|
+
`office-ribbon-add-in` event (`{ tab, command }`) from the editor. It never
|
|
225
|
+
reaches the product's own command router, Tell me or key tips.
|
|
226
|
+
- The elements a panel is built from are defined on demand, and a panel whose
|
|
227
|
+
look did not change is kept across assignments, so passing a new array with
|
|
228
|
+
new callbacks on every render is cheap and never closes an open drop-down.
|
|
229
|
+
- In the PowerPoint ribbon a drop-down (`items`) is drawn as its items, and the
|
|
230
|
+
phone toolbar does not list host tabs.
|
|
231
|
+
- `size: 'small'` commands fill columns of three; `items` makes a drop-down.
|
|
232
|
+
`icon` is a name from the shared icon set; `registerIcon` adds your own.
|
|
233
|
+
- Assign a new array to change the tabs; an empty array removes them. A tab
|
|
234
|
+
whose id is empty, repeated or equal to a built-in tab id is skipped, so an
|
|
235
|
+
add-in cannot replace a product tab.
|
|
236
|
+
- The descriptor types and the event name are DOM-free and live in
|
|
237
|
+
`ooxml-core/ribbon`; `ooxml-ui` re-exports them.
|
|
238
|
+
- Products render the list with `syncRibbonAddIns(ribbon, tabs, options)`
|
|
239
|
+
(`src/ribbon/add-in-tabs.ts`); a new product editor calls it rather than
|
|
240
|
+
building panels itself.
|
|
241
|
+
|
|
189
242
|
## Design tokens
|
|
190
243
|
|
|
191
244
|
Every control is token based: no colour, length, radius, font size, shadow, duration or layer
|