@fluentui/web-components 3.0.0-beta.7 → 3.0.0-beta.70

package/dist/esm/drawer-body/drawer-body.styles.js

@@ -0,0 +1,31 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../utils/index.js';
+import { spacingHorizontalM, spacingHorizontalXL } from '../theme/design-tokens.js';
+import { typographySubtitle1Styles } from '../styles/partials/typography.partials.js';
+/** Drawer styles
+ * @public
+ */
+export const styles = css `
+  ${display('grid')}
+  :host {
+    box-sizing: border-box;
+    grid-template-rows: min-content auto min-content;
+    position: relative;
+    height: 100%;
+    padding: ${spacingHorizontalXL};
+    max-height: 100svh;
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    ${typographySubtitle1Styles}
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-start;
+    gap: ${spacingHorizontalM};
+  }
+`;
+//# sourceMappingURL=drawer-body.styles.js.map

package/dist/esm/drawer-body/drawer-body.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-body.styles.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACpF,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AAEtF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;eAMJ,mBAAmB;;;;;;;MAO5B,yBAAyB;;;;;;WAMpB,kBAAkB;;CAE5B,CAAC"}

package/dist/esm/drawer-body/drawer-body.template.js

@@ -0,0 +1,21 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * The template for the Drawer component.
+ * @public
+ */
+export function drawerBodyTemplate() {
+    return html `
+    <div class="header" part="header">
+      <slot name="title"></slot>
+      <slot name="close"></slot>
+    </div>
+    <div class="content" part="content">
+      <slot></slot>
+    </div>
+    <div class="footer" part="footer">
+      <slot name="footer"></slot>
+    </div>
+  `;
+}
+export const template = drawerBodyTemplate();
+//# sourceMappingURL=drawer-body.template.js.map

package/dist/esm/drawer-body/drawer-body.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-body.template.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;;GAGG;AACH,MAAM,UAAU,kBAAkB;IAChC,OAAO,IAAI,CAAG;;;;;;;;;;;GAWb,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}

package/dist/esm/drawer-body/index.js

@@ -0,0 +1,5 @@
+export * from './drawer-body.js';
+export { definition as DrawerBodyDefinition } from './drawer-body.definition.js';
+export { styles as DrawerBodyStyles } from './drawer-body.styles.js';
+export { template as DrawerBodyTemplate } from './drawer-body.template.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/drawer-body/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer-body/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/esm/field/define.js

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './field.definition.js';
+definition.define(FluentDesignSystem.registry);
+//# sourceMappingURL=define.js.map

package/dist/esm/field/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/field/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/field/field.bench.js

@@ -0,0 +1,10 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './field.definition.js';
+definition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const field = document.createElement('fluent-field');
+    return field;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=field.bench.js.map

package/dist/esm/field/field.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.bench.js","sourceRoot":"","sources":["../../../src/field/field.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACrD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/field/field.definition.js

@@ -0,0 +1,20 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Field } from './field.js';
+import { styles } from './field.styles.js';
+import { template } from './field.template.js';
+/**
+ * The Fluent Field Element
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-field>`
+ */
+export const definition = Field.compose({
+    name: `${FluentDesignSystem.prefix}-field`,
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
+});
+//# sourceMappingURL=field.definition.js.map

package/dist/esm/field/field.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.definition.js","sourceRoot":"","sources":["../../../src/field/field.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,QAAQ;IAC1C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}

package/dist/esm/field/field.js

@@ -0,0 +1,212 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, observable } from '@microsoft/fast-element';
+import { uniqueId } from '@microsoft/fast-web-utilities';
+import { toggleState } from '../utils/element-internals.js';
+import { LabelPosition, ValidationFlags } from './field.options.js';
+/**
+ * A Field Custom HTML Element.
+ *
+ * @public
+ */
+export class BaseField extends FASTElement {
+    /**
+     * Updates attributes on the slotted label elements.
+     *
+     * @param prev - the previous list of slotted label elements
+     * @param next - the current list of slotted label elements
+     */
+    labelSlotChanged(prev, next) {
+        if (next && this.input) {
+            this.setLabelProperties();
+            this.setStates();
+        }
+    }
+    /**
+     * Adds or removes the `invalid` event listener based on the presence of slotted message elements.
+     *
+     * @param prev - the previous list of slotted message elements
+     * @param next - the current list of slotted message elements
+     * @internal
+     */
+    messageSlotChanged(prev, next) {
+        toggleState(this.elementInternals, 'has-message', !!next.length);
+        if (!next.length) {
+            this.removeEventListener('invalid', this.invalidHandler, { capture: true });
+            return;
+        }
+        this.addEventListener('invalid', this.invalidHandler, { capture: true });
+    }
+    /**
+     * Sets the `input` property to the first slotted input.
+     *
+     * @param prev - The previous collection of inputs.
+     * @param next - The current collection of inputs.
+     * @internal
+     */
+    slottedInputsChanged(prev, next) {
+        if (next === null || next === void 0 ? void 0 : next.length) {
+            this.input = next === null || next === void 0 ? void 0 : next[0];
+            this.setStates();
+        }
+    }
+    /**
+     * Updates the field's states and label properties when the assigned input changes.
+     *
+     * @param prev - the previous input
+     * @param next - the current input
+     */
+    inputChanged(prev, next) {
+        if (next) {
+            this.setStates();
+            this.setLabelProperties();
+        }
+    }
+    /**
+     * Calls the `setStates` method when a `change` event is emitted from the slotted input.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    changeHandler(e) {
+        this.setStates();
+        this.setValidationStates();
+        return true;
+    }
+    /**
+     * Redirects `click` events to the slotted input.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    clickHandler(e) {
+        if (this === e.target) {
+            this.input.click();
+        }
+        return true;
+    }
+    constructor() {
+        super();
+        /**
+         * The slotted label elements.
+         *
+         * @internal
+         */
+        this.labelSlot = [];
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        this.elementInternals.role = 'presentation';
+    }
+    /**
+     * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
+     *
+     * @param e - the focus event
+     * @internal
+     */
+    focusinHandler(e) {
+        if (this.matches(':focus-within:has(> :focus-visible)')) {
+            toggleState(this.elementInternals, 'focus-visible', true);
+        }
+        return true;
+    }
+    /**
+     * Removes the `focus-visible` state from the field when a slotted input loses focus.
+     *
+     * @param e - the focus event
+     * @internal
+     */
+    focusoutHandler(e) {
+        toggleState(this.elementInternals, 'focus-visible', false);
+        return true;
+    }
+    /**
+     * Toggles validity state flags on the element when the slotted input emits an `invalid` event (if slotted validation messages are present).
+     *
+     * @param e - the event object
+     * @internal
+     */
+    invalidHandler(e) {
+        if (this.messageSlot.length) {
+            e.preventDefault();
+        }
+        this.setValidationStates();
+    }
+    /**
+     * Sets ARIA and form-related attributes on slotted label elements.
+     *
+     * @internal
+     */
+    setLabelProperties() {
+        var _a;
+        if (this.$fastController.isConnected) {
+            this.input.id = this.input.id || uniqueId('input');
+            (_a = this.labelSlot) === null || _a === void 0 ? void 0 : _a.forEach(label => {
+                if (label instanceof HTMLLabelElement) {
+                    label.htmlFor = label.htmlFor || this.input.id;
+                    label.id = label.id || `${this.input.id}--label`;
+                    label.setAttribute('aria-hidden', 'true');
+                    this.input.setAttribute('aria-labelledby', label.id);
+                }
+            });
+        }
+    }
+    /**
+     * Toggles the field's states based on the slotted input.
+     *
+     * @internal
+     */
+    setStates() {
+        if (this.$fastController.isConnected) {
+            toggleState(this.elementInternals, 'disabled', !!this.input.disabled);
+            toggleState(this.elementInternals, 'readonly', !!this.input.readOnly);
+            toggleState(this.elementInternals, 'required', !!this.input.required);
+            toggleState(this.elementInternals, 'checked', !!this.input.checked);
+        }
+    }
+    setValidationStates() {
+        if (!this.input.validity) {
+            return;
+        }
+        for (const [flag, value] of Object.entries(ValidationFlags)) {
+            toggleState(this.elementInternals, value, this.input.validity[flag]);
+        }
+    }
+}
+__decorate([
+    observable
+], BaseField.prototype, "labelSlot", void 0);
+__decorate([
+    observable
+], BaseField.prototype, "messageSlot", void 0);
+__decorate([
+    observable
+], BaseField.prototype, "slottedInputs", void 0);
+__decorate([
+    observable
+], BaseField.prototype, "input", void 0);
+/**
+ * A Field Custom HTML Element.
+ * Based on BaseField and includes style and layout specific attributes
+ *
+ * @public
+ */
+export class Field extends BaseField {
+    constructor() {
+        super(...arguments);
+        /**
+         * The position of the label relative to the input.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `label-position`
+         */
+        this.labelPosition = LabelPosition.above;
+    }
+}
+__decorate([
+    attr({ attribute: 'label-position' })
+], Field.prototype, "labelPosition", void 0);
+//# sourceMappingURL=field.js.map

package/dist/esm/field/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../src/field/field.ts"],"names":[],"mappings":"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"}

package/dist/esm/field/field.options.js

@@ -0,0 +1,27 @@
+/**
+ * Label position values
+ * @public
+ */
+export const LabelPosition = {
+    above: 'above',
+    after: 'after',
+    before: 'before',
+};
+/**
+ * Synthetic type for slotted message elements
+ * @public
+ */
+export const ValidationFlags = {
+    badInput: 'bad-input',
+    customError: 'custom-error',
+    patternMismatch: 'pattern-mismatch',
+    rangeOverflow: 'range-overflow',
+    rangeUnderflow: 'range-underflow',
+    stepMismatch: 'step-mismatch',
+    tooLong: 'too-long',
+    tooShort: 'too-short',
+    typeMismatch: 'type-mismatch',
+    valueMissing: 'value-missing',
+    valid: 'valid',
+};
+//# sourceMappingURL=field.options.js.map

package/dist/esm/field/field.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.options.js","sourceRoot":"","sources":["../../../src/field/field.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC;AAmBX;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,QAAQ,EAAE,WAAW;IACrB,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,kBAAkB;IACnC,aAAa,EAAE,gBAAgB;IAC/B,cAAc,EAAE,iBAAiB;IACjC,YAAY,EAAE,eAAe;IAC7B,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;IACrB,YAAY,EAAE,eAAe;IAC7B,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,OAAO;CACN,CAAC"}

package/dist/esm/field/field.styles.js

@@ -0,0 +1,200 @@
+import { css } from '@microsoft/fast-element';
+import { disabledState } from '../styles/states/index.js';
+import { borderRadiusMedium, colorNeutralForeground1, colorStrokeFocus2, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, spacingHorizontalM, spacingVerticalM, spacingVerticalS, spacingVerticalXXS, strokeWidthThick, } from '../theme/design-tokens.js';
+import { display } from '../utils/display.js';
+import { ValidationFlags } from './field.options.js';
+/**
+ * Selector for the `focus-visible` state.
+ * @public
+ */
+const focusVisibleState = css.partial `:is([state--focus-visible], :state(focus-visible))`;
+/**
+ * Selector for the `bad-input` state.
+ * @public
+ */
+const badInputState = css.partial `:is([state--${ValidationFlags.badInput}], :state(${ValidationFlags.badInput}))`;
+/**
+ * Selector for the `custom-error` state.
+ * @public
+ */
+const customErrorState = css.partial `:is([state--${ValidationFlags.customError}], :state(${ValidationFlags.customError}))`;
+/**
+ * Selector for the `pattern-mismatch` state.
+ * @public
+ */
+const patternMismatchState = css.partial `:is([state--${ValidationFlags.patternMismatch}], :state(${ValidationFlags.patternMismatch}))`;
+/**
+ * Selector for the `range-overflow` state.
+ * @public
+ */
+const rangeOverflowState = css.partial `:is([state--${ValidationFlags.rangeOverflow}], :state(${ValidationFlags.rangeOverflow}))`;
+/**
+ * Selector for the `range-underflow` state.
+ * @public
+ */
+const rangeUnderflowState = css.partial `:is([state--${ValidationFlags.rangeUnderflow}], :state(${ValidationFlags.rangeUnderflow}))`;
+/**
+ * Selector for the `step-mismatch` state.
+ * @public
+ */
+const stepMismatchState = css.partial `:is([state--${ValidationFlags.stepMismatch}], :state(${ValidationFlags.stepMismatch}))`;
+/**
+ * Selector for the `too-long` state.
+ * @public
+ */
+const tooLongState = css.partial `:is([state--${ValidationFlags.tooLong}], :state(${ValidationFlags.tooLong}))`;
+/**
+ * Selector for the `too-short` state.
+ * @public
+ */
+const tooShortState = css.partial `:is([state--${ValidationFlags.tooShort}], :state(${ValidationFlags.tooShort}))`;
+/**
+ * Selector for the `type-mismatch` state.
+ * @public
+ */
+const typeMismatchState = css.partial `:is([state--${ValidationFlags.typeMismatch}], :state(${ValidationFlags.typeMismatch}))`;
+/**
+ * Selector for the `valid` state.
+ * @public
+ */
+const validState = css.partial `:is([state-${ValidationFlags.valid}], :state(${ValidationFlags.valid}))`;
+/**
+ * Selector for the `value-missing` state.
+ * @public
+ */
+const valueMissingState = css.partial `:is([state--${ValidationFlags.valueMissing}], :state(${ValidationFlags.valueMissing}))`;
+/**
+ * Selector for the `has-message` state.
+ * @public
+ */
+const hasMessageState = css.partial `:is([state--has-message], :state(has-message))`;
+/**
+ * The styles for the {@link Field} component.
+ *
+ * @public
+ */
+export const styles = css `
+  ${display('inline-grid')}
+
+  :host {
+    color: ${colorNeutralForeground1};
+    align-items: center;
+    gap: 0 ${spacingHorizontalM};
+    justify-items: start;
+    position: relative;
+  }
+
+  :has([slot='message']) {
+    color: ${colorNeutralForeground1};
+    row-gap: ${spacingVerticalS};
+  }
+
+  :not(::slotted([slot='label'])) {
+    gap: 0;
+  }
+
+  :host([label-position='before']) {
+    grid-template-areas: 'label input' 'label message';
+  }
+
+  :host([label-position='after']) {
+    gap: 0;
+    grid-template-areas: 'input label' 'message message';
+    grid-template-columns: auto 1fr;
+  }
+
+  :host([label-position='after']) ::slotted([slot='input']) {
+    margin-inline-end: ${spacingHorizontalM};
+  }
+
+  :host([label-position='above']) {
+    grid-template-areas: 'label' 'input' 'message';
+    row-gap: ${spacingVerticalXXS};
+  }
+
+  :host([label-position='below']) {
+    grid-template-areas: 'input' 'label' 'message';
+    justify-items: center;
+  }
+
+  :host([label-position='below']) ::slotted([slot='label']) {
+    margin-block-start: ${spacingVerticalM};
+  }
+
+  :host([label-position='below']:not(${hasMessageState})) {
+    grid-template-areas: 'input' 'label';
+  }
+
+  ::slotted([slot='label'])::after {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
+
+  ::slotted([slot='input']) {
+    grid-area: input;
+    position: relative;
+    z-index: 1;
+  }
+
+  ::slotted([slot='message']) {
+    margin-block-start: ${spacingVerticalXXS};
+    grid-area: message;
+  }
+
+  :host(${focusVisibleState}:focus-within) {
+    border-radius: ${borderRadiusMedium};
+    outline: ${strokeWidthThick} solid ${colorStrokeFocus2};
+  }
+
+  ::slotted(label),
+  ::slotted([slot='label']) {
+    cursor: inherit;
+    display: inline-flex;
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
+    font-weight: ${fontWeightRegular};
+    grid-area: label;
+    line-height: ${lineHeightBase300};
+    user-select: none;
+  }
+
+  :host([size='small']) ::slotted(label) {
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+  }
+
+  :host([size='large']) ::slotted(label) {
+    font-size: ${fontSizeBase400};
+    line-height: ${lineHeightBase400};
+  }
+
+  :host([size='large']) ::slotted(label),
+  :host([weight='semibold']) ::slotted(label) {
+    font-weight: ${fontWeightSemibold};
+  }
+
+  :host(${disabledState}) {
+    cursor: default;
+  }
+
+  ::slotted([flag]) {
+    display: none;
+  }
+
+  :host(${badInputState}) ::slotted([flag='${ValidationFlags.badInput}']),
+  :host(${customErrorState}) ::slotted([flag='${ValidationFlags.customError}']),
+  :host(${patternMismatchState}) ::slotted([flag='${ValidationFlags.patternMismatch}']),
+  :host(${rangeOverflowState}) ::slotted([flag='${ValidationFlags.rangeOverflow}']),
+  :host(${rangeUnderflowState}) ::slotted([flag='${ValidationFlags.rangeUnderflow}']),
+  :host(${stepMismatchState}) ::slotted([flag='${ValidationFlags.stepMismatch}']),
+  :host(${tooLongState}) ::slotted([flag='${ValidationFlags.tooLong}']),
+  :host(${tooShortState}) ::slotted([flag='${ValidationFlags.tooShort}']),
+  :host(${typeMismatchState}) ::slotted([flag='${ValidationFlags.typeMismatch}']),
+  :host(${valueMissingState}) ::slotted([flag='${ValidationFlags.valueMissing}']),
+  :host(${validState}) ::slotted([flag='${ValidationFlags.valid}']) {
+    display: block;
+  }
+`;
+//# sourceMappingURL=field.styles.js.map

package/dist/esm/field/field.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.styles.js","sourceRoot":"","sources":["../../../src/field/field.styles.ts"],"names":[],"mappings":"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"}

package/dist/esm/field/field.template.js

@@ -0,0 +1,26 @@
+import { children, elements, html, slotted } from '@microsoft/fast-element';
+/**
+ * Template for the Field component
+ * @public
+ */
+export const template = html `
+  <template
+    @click="${(x, c) => x.clickHandler(c.event)}"
+    @change="${(x, c) => x.changeHandler(c.event)}"
+    @focusin="${(x, c) => x.focusinHandler(c.event)}"
+    @focusout="${(x, c) => x.focusoutHandler(c.event)}"
+    ${children({
+    property: 'slottedInputs',
+    attributes: true,
+    attributeFilter: ['disabled', 'required', 'readonly'],
+    subtree: true,
+    selector: '[slot="input"]',
+    filter: elements(),
+})}
+  >
+    <slot name="label" part="label" ${slotted('labelSlot')}></slot>
+    <slot name="input" part="input"></slot>
+    <slot name="message" part="message" ${slotted({ property: 'messageSlot', filter: elements('[flag]') })}></slot>
+  </template>
+`;
+//# sourceMappingURL=field.template.js.map

package/dist/esm/field/field.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.template.js","sourceRoot":"","sources":["../../../src/field/field.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAuB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGjG;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwB,IAAI,CAAO;;cAE1C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;eAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAmB,CAAC;gBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAChD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;MAC7D,QAAQ,CAAC;IACT,QAAQ,EAAE,eAAe;IACzB,UAAU,EAAE,IAAI;IAChB,eAAe,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC;IACrD,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,QAAQ,EAAE;CACnB,CAAC;;sCAEgC,OAAO,CAAC,WAAW,CAAC;;0CAEhB,OAAO,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;;CAEzG,CAAC"}

package/dist/esm/field/index.js

@@ -0,0 +1,6 @@
+export { BaseField, Field } from './field.js';
+export { LabelPosition as FieldLabelPosition, ValidationFlags } from './field.options.js';
+export { definition as FieldDefinition } from './field.definition.js';
+export { styles as FieldStyles } from './field.styles.js';
+export { template as FieldTemplate } from './field.template.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1F,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}