@fabric-msft/fabric-web 7.2.0 → 7.4.0

package/esm/components/dynamic-tab/dynamic-tab.styles.js

@@ -0,0 +1,13 @@
+import { css } from '@microsoft/fast-element';
+import { fontFamilyBase, spacingHorizontalXS, spacingVerticalSNudge, spacingHorizontalS, borderRadiusMedium, colorSubtleBackground, colorSubtleBackgroundHover, fontWeightSemibold, colorSubtleBackgroundPressed, colorSubtleBackgroundSelected, colorStrokeFocus2, colorNeutralForegroundDisabled, colorNeutralForeground1, fontSizeBase300, fontWeightRegular, lineHeightBase300, colorNeutralStroke2 } from '@fluentui/web-components';
+import { visuallyHidden } from '../styles/patterns/patterns.js';
+
+/**
+ * Styles for the DynamicTab component.
+ * @public
+ */
+const styles = css`
+  ${visuallyHidden}
+  :host{white-space:normal;outline:none}.root{display:inline-flex;position:relative;box-sizing:border-box;font-family:${fontFamilyBase};outline:none;min-width:180px;}.container{display:flex;align-items:center;gap:${spacingHorizontalXS};padding:${spacingVerticalSNudge} ${spacingHorizontalS};border-radius:${borderRadiusMedium};background:${colorSubtleBackground};width:100%;box-sizing:border-box;cursor:pointer}:host(:hover:not([disabled]):not([selected])) .container{background:${colorSubtleBackgroundHover}}:host(:hover:not([disabled])) .label{font-weight:${fontWeightSemibold}}:host(:active:not([disabled])) .container{background:${colorSubtleBackgroundPressed}}:host([selected]) .container{background:${colorSubtleBackgroundSelected}}:host([selected]) .label{font-weight:${fontWeightSemibold}}:host([selected]) .divider{display:none}:host(:focus-visible) .container{outline:2px solid ${colorStrokeFocus2};outline-offset:-2px}:host([disabled]){cursor:not-allowed}:host([disabled]) .container{cursor:not-allowed}:host([disabled]) .label{color:${colorNeutralForegroundDisabled}}:host([disabled]) .icon{color:${colorNeutralForegroundDisabled}}.icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:${colorNeutralForeground1}}.label{flex:1;font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};color:${colorNeutralForeground1};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.dismiss-button{flex-shrink:0;--button-padding-inline:0;--button-min-width:20px;padding:0;padding-inline-start:${spacingHorizontalXS};min-width:unset;min-height:unset;border:unset}.modified-indicator{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;color:${colorNeutralForeground1}}.modified-indicator svg{width:6px;height:6px}.divider{position:absolute;inset-inline-end:-1px;top:50%;transform:translateY(-50%);width:1px;height:20px;background:${colorNeutralStroke2};display:var(--tab-divider-display,block)}`;
+
+export { styles };

package/esm/components/dynamic-tab/dynamic-tab.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-tab.styles.js","sourceRoot":"","sources":["../../../../src/components/dynamic-tab/dynamic-tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,8BAA8B,EAC9B,mBAAmB,EACnB,iBAAiB,EACjB,qBAAqB,EACrB,0BAA0B,EAC1B,4BAA4B,EAC5B,6BAA6B,EAC7B,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,cAAc;;;;;;;;;;mBAUC,cAAc;;;;;;;;WAQtB,mBAAmB;eACf,qBAAqB,IAAI,kBAAkB;qBACrC,kBAAkB;kBACrB,qBAAqB;;;;;;;;kBAQrB,0BAA0B;;;;mBAIzB,kBAAkB;;;;;kBAKnB,4BAA4B;;;;;kBAK5B,6BAA6B;;;;mBAI5B,kBAAkB;;;;;;;;;yBASZ,iBAAiB;;;;;;;;;;;;;;aAc7B,8BAA8B;;;;aAI9B,8BAA8B;;;;;;;;;;;aAW9B,uBAAuB;;;;;;iBAMnB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;aACvB,uBAAuB;;;;;;;;;;;;;4BAaR,mBAAmB;;;;;;;;;;;;;;aAclC,uBAAuB;;;;;;;;;;;;;;;;kBAgBlB,mBAAmB;;;CAGpC,CAAC"}

package/esm/components/dynamic-tab/dynamic-tab.template.js

@@ -0,0 +1,18 @@
+import { when, html } from '@microsoft/fast-element';
+import { documentIcon, modifiedIndicatorSVG, dismissIcon } from '../../util/icons.js';
+import { getString } from '@fabric-msft/localization';
+
+/**
+ * Template for the DynamicTab component.
+ * @public
+ */
+function dynamicTabTemplate() {
+  return html`<template role="tab" aria-selected="${x => x.selected}" aria-disabled="${x => x.disabled}" aria-describedby="${x => !x.noDismiss ? `${x.effectiveId}-hint` : undefined}" @click="${(x, c) => x.handleClick(c.event)}" @keydown="${(x, c) => x.handleKeydown(c.event)}"><div class="root"><div class="container"><span class="icon"><slot name="icon">${documentIcon}</slot></span><span class="label"><slot></slot></span>${when(x => x.modified, html`<span class="modified-indicator" aria-label="${x => x.modifiedLabel || getString("DynamicTab_Modified")}">${modifiedIndicatorSVG}</span>`)} ${when(x => !x.noDismiss && !x.disabled && !x.modified, html`<fabric-button class="dismiss-button" icon-only appearance="transparent" aria-label="${x => x.closeTabLabel || getString("DynamicTab_CloseTab")}" @click="${(x, c) => x.handleDismissClick(c.event)}" tabindex="-1"><slot name="dismiss-icon">${dismissIcon}</slot></fabric-button>`)}</div>${when(x => !x.noDismiss, html`<span id="${x => `${x.effectiveId}-hint`}" class="visually-hidden">${x => x.closeHintLabel || getString("DynamicTab_CloseHint")}</span>`)} ${when(x => !x.selected, html`<div class="divider"></div>`)}</div></template>`;
+}
+/**
+ * The template for the DynamicTab component.
+ * @public
+ */
+const template = dynamicTabTemplate();
+
+export { dynamicTabTemplate, template };

package/esm/components/dynamic-tab/dynamic-tab.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-tab.template.js","sourceRoot":"","sources":["../../../../src/components/dynamic-tab/dynamic-tab.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD;;;GAGG;AACH,MAAM,UAAU,kBAAkB;IAGhC,OAAO,IAAI,CAAG;;;uBAGO,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACjB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;0BACd,CAAC,CAAC,EAAE,EAAE,CACxB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,OAAO,CAAC,CAAC,CAAC,SAAS;gBAC1C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;kBAC5C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAsB,CAAC;;;;;gCAKrC,YAAY;;;;;YAKhC,IAAI,CACJ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,EACjB,IAAI,CAAG;;;8BAGW,CAAC,CAAC,EAAE,EAAE,CAClB,CAAC,CAAC,aAAa,IAAI,SAAS,CAAC,qBAAqB,CAAC;;kBAEnD,oBAAoB;;aAEzB,CACF;YACC,IAAI,CACJ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,QAAQ,EACjD,IAAI,CAAG;;;;;8BAKW,CAAC,CAAC,EAAE,EAAE,CAClB,CAAC,CAAC,aAAa,IAAI,SAAS,CAAC,qBAAqB,CAAC;0BAC3C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACjB,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAmB,CAAC;;;4CAGjB,WAAW;;aAE1C,CACF;;UAED,IAAI,CACJ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,EACnB,IAAI,CAAG;;oBAEG,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,WAAW,OAAO;;;gBAGlC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,IAAI,SAAS,CAAC,sBAAsB,CAAC;;WAEjE,CACF;UACC,IAAI,CACJ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,EAClB,IAAI,CAAG;;WAEN,CACF;;;GAGN,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}

package/esm/components/dynamic-tab/index.js

@@ -0,0 +1,6 @@
+export { DynamicTab } from "./dynamic-tab.js";
+export { DynamicTabEventNames } from "./dynamic-tab.options.js";
+export { template as DynamicTabTemplate } from "./dynamic-tab.template.js";
+export { styles as DynamicTabStyles } from "./dynamic-tab.styles.js";
+export { definition as DynamicTabDefinition } from "./dynamic-tab.definition.js";
+//# sourceMappingURL=index.js.map

package/esm/components/dynamic-tab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/dynamic-tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC"}

package/esm/components/dynamic-tab-list/define.js

@@ -0,0 +1,12 @@
+import { DesignSystem } from "../design-system.js";
+import { definition } from "./dynamic-tab-list.definition.js";
+import { definition as PopoverDefinition } from "../popover/popover.definition.js";
+import { definition as MenuListDefinition } from "../menu-list/menu-list.definition.js";
+import { definition as MenuItemDefinition } from "../menu-item/menu-item.definition.js";
+// Ensure popover is registered for context menu support
+PopoverDefinition.define(DesignSystem.registry);
+// Ensure menu components are registered for built-in manage tabs menu
+MenuListDefinition.define(DesignSystem.registry);
+MenuItemDefinition.define(DesignSystem.registry);
+definition.define(DesignSystem.registry);
+//# sourceMappingURL=define.js.map

package/esm/components/dynamic-tab-list/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/dynamic-tab-list/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACnF,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AACxF,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAExF,wDAAwD;AACxD,iBAAiB,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEhD,sEAAsE;AACtE,kBAAkB,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACjD,kBAAkB,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEjD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/dynamic-tab-list/dynamic-tab-list.definition.js

@@ -0,0 +1,19 @@
+import { DesignSystem } from '../design-system.js';
+import { DynamicTabList } from './dynamic-tab-list.js';
+import { styles } from './dynamic-tab-list.styles.js';
+import { template } from './dynamic-tab-list.template.js';
+
+/**
+ * The Fabric DynamicTabList component definition.
+ * @public
+ */
+const definition = DynamicTabList.compose({
+  name: `${DesignSystem.prefix}-dynamic-tab-list`,
+  template,
+  styles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
+});
+
+export { definition };

package/esm/components/dynamic-tab-list/dynamic-tab-list.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-tab-list.definition.js","sourceRoot":"","sources":["../../../../src/components/dynamic-tab-list/dynamic-tab-list.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC;IAC/C,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,mBAAmB;IAC/C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}