@fluentui/web-components 2.4.0 → 2.5.2

package/dist/dts/utilities/type-ramp.d.ts

@@ -0,0 +1,12 @@
+/** @public */
+export declare const StandardFontWeight: {
+    readonly Thin: 100;
+    readonly ExtraLight: 200;
+    readonly Light: 300;
+    readonly Normal: 400;
+    readonly Medium: 500;
+    readonly SemiBold: 600;
+    readonly Bold: 700;
+    readonly ExtraBold: 800;
+    readonly Black: 900;
+};

package/dist/esm/_docs/design-system/color-explorer/app.js

@@ -0,0 +1,247 @@
+import { __decorate } from "tslib";
+import { parseColorHexRGB } from '@microsoft/fast-colors';
+import { attr, css, customElement, FASTElement, html, observable, ref, repeat, when } from '@microsoft/fast-element';
+import { accentBaseColor, baseLayerLuminance, neutralBaseColor, neutralLayer1Recipe, neutralLayer2Recipe, neutralLayer3Recipe, neutralLayer4Recipe, neutralLayerCardContainerRecipe, neutralLayerFloatingRecipe, PaletteRGB, StandardLuminance, SwatchRGB, } from '../../../index-rollup';
+import { ComponentTypes } from './component-types';
+import { AppColorBlock } from './components/color-block';
+import { AppControlPane } from './components/control-pane';
+import { AppGradient } from './components/gradient';
+import { AppSampleApp } from './components/sample-app';
+AppColorBlock;
+AppControlPane;
+AppGradient;
+AppSampleApp;
+const sampleTemplate = html `
+  <fluent-design-system-provider
+    neutral-color="${x => x.neutralColor}"
+    accent-color="${x => x.accentColor}"
+    style="display: flex; align-items: stretch; align-content: stretch; justify-content: center; flex-grow: 1;"
+  >
+    <app-layer-background
+      id="light-mode"
+      base-layer-luminance="${StandardLuminance.LightMode}"
+      background-layer-recipe="L4"
+      style="flex-grow: 1; padding: 100px;"
+    >
+      <app-sample-app></app-sample-app>
+    </app-layer-background>
+    <app-layer-background
+      id="dark-mode"
+      base-layer-luminance="${StandardLuminance.DarkMode}"
+      background-layer-recipe="L4"
+      style="flex-grow: 1; padding: 100px;"
+    >
+      <app-sample-app></app-sample-app>
+    </app-layer-background>
+  </fluent-design-system-provider>
+`;
+const colorBlockTemplate = html `
+  ${repeat(x => x.backgrounds(), html `
+      <app-color-block
+        id="${x => x.color.toUpperCase().replace('#', '')}"
+        index="${(x, c) => x.index}"
+        component="${(x, c) => c.parent.componentType}"
+        color="${x => x.color}"
+        layer-name="${x => x.title}"
+      ></app-color-block>
+    `)}
+`;
+const template = html `
+  <div class="container fill">
+    <div class="row fill">
+      <div class="canvas" ${ref('canvasElement')}>
+        <div class="container fill">
+          <div class="row gradient">
+            <app-gradient :colors="${x => x.neutralPalette}" :markedColor="${x => x.neutralColor}"></app-gradient>
+          </div>
+          <div class="row gradient">
+            <app-gradient :colors="${x => x.accentPalette}" :markedColor="${x => x.accentColor}"></app-gradient>
+          </div>
+          <div class="row fill">
+            <div style="display: flex; overflow: auto;">
+              ${when(x => x.componentType === ComponentTypes.sample, sampleTemplate)}
+              ${when(x => x.componentType !== ComponentTypes.sample, colorBlockTemplate)}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <app-layer-background
+          id="control-pane"
+          class="control-pane-container"
+          base-layer-luminance="${StandardLuminance.DarkMode}"
+          background-layer-recipe="L2"
+        >
+          <app-control-pane
+            :componentType="${x => x.componentType}"
+            :neutralColor="${x => x.neutralColor}"
+            :accentColor="${x => x.accentColor}"
+            :showOnlyLayerBackgrounds="${x => x.showOnlyLayerBackgrounds}"
+            @formvaluechange="${(x, c) => x.controlPaneHandler(c.event)}"
+          ></app-control-pane>
+        </app-layer-background>
+      </div>
+    </div>
+  </div>
+`;
+const styles = css `
+  :host {
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .container.fill {
+    width: 100%;
+    height: 1200px;
+  }
+
+  .row {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    flex-basis: auto;
+  }
+
+  .row.fill {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .canvas {
+    min-width: 300px;
+    flex-grow: 1;
+  }
+
+  .gradient {
+    height: 20px;
+  }
+
+  .control-pane-container {
+    height: 100%;
+    z-index: 1;
+    padding: 40px;
+    position: relative;
+    overflow: auto;
+    width: 310px;
+    box-sizing: border-box;
+  }
+
+  app-color-block {
+    min-width: 400px;
+  }
+`;
+let App = class App extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.componentType = ComponentTypes.backplate;
+        this.neutralPalette = [];
+        this.accentPalette = [];
+        this.showOnlyLayerBackgrounds = true;
+        this.layerRecipes = [
+            [neutralLayerFloatingRecipe, 'neutralLayerFloating'],
+            [neutralLayerCardContainerRecipe, 'neutralLayerCardContainer'],
+            [neutralLayer1Recipe, 'neutralLayer1'],
+            [neutralLayer2Recipe, 'neutralLayer2'],
+            [neutralLayer3Recipe, 'neutralLayer3'],
+            [neutralLayer4Recipe, 'neutralLayer4'],
+        ];
+        this.resolveLayerRecipes = (luminance) => {
+            const designSystemElement = document.createElement('div');
+            this.canvasElement.appendChild(designSystemElement);
+            baseLayerLuminance.setValueFor(designSystemElement, luminance);
+            return this.layerRecipes
+                .map((conf) => {
+                const color = conf[0].getValueFor(document.body).evaluate(designSystemElement).toColorString();
+                return {
+                    index: this.neutralPalette.indexOf(color),
+                    color: color,
+                    title: conf[1],
+                };
+            })
+                .reduce((accum, value) => {
+                const colorIndex = accum.findIndex((config) => config.color === value.color);
+                return colorIndex === -1
+                    ? accum.concat(value)
+                    : accum.map((config, index) => index === colorIndex
+                        ? {
+                            index: this.neutralPalette.indexOf(value.color),
+                            color: value.color,
+                            title: value.title.concat(', ', config.title),
+                        }
+                        : config);
+            }, [])
+                .sort((a, b) => a.index - b.index);
+        };
+    }
+    neutralColorChanged(prev, next) {
+        if (this.canvasElement && next) {
+            const swatch = SwatchRGB.from(parseColorHexRGB(next));
+            neutralBaseColor.setValueFor(this.canvasElement, swatch);
+            this.neutralPalette = PaletteRGB.from(swatch).swatches.map((x) => x.toColorString());
+        }
+    }
+    accentColorChanged(prev, next) {
+        if (this.canvasElement && next) {
+            const swatch = SwatchRGB.from(parseColorHexRGB(next));
+            accentBaseColor.setValueFor(this.canvasElement, swatch);
+            this.accentPalette = PaletteRGB.from(swatch).swatches.map((x) => x.toColorString());
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.neutralColorChanged(undefined, this.neutralColor);
+        this.accentColorChanged(undefined, this.accentColor);
+    }
+    backgrounds() {
+        const neutralLayers = this.lightModeLayers.concat(this.darkModeLayers);
+        return this.showOnlyLayerBackgrounds
+            ? neutralLayers
+            : this.neutralPalette.map((color, index) => {
+                const neutralLayerIndex = neutralLayers.findIndex((config) => config.color === color);
+                return {
+                    index,
+                    color,
+                    title: neutralLayerIndex !== -1 ? neutralLayers[neutralLayerIndex].title : undefined,
+                };
+            });
+    }
+    get lightModeLayers() {
+        return this.resolveLayerRecipes(StandardLuminance.LightMode);
+    }
+    get darkModeLayers() {
+        return this.resolveLayerRecipes(StandardLuminance.DarkMode);
+    }
+    controlPaneHandler(e) {
+        const detail = e.detail;
+        this[detail.field] = detail.value;
+    }
+};
+__decorate([
+    attr({ attribute: 'component-type' })
+], App.prototype, "componentType", void 0);
+__decorate([
+    attr({ attribute: 'neutral-color' })
+], App.prototype, "neutralColor", void 0);
+__decorate([
+    observable
+], App.prototype, "neutralPalette", void 0);
+__decorate([
+    attr({ attribute: 'accent-color' })
+], App.prototype, "accentColor", void 0);
+__decorate([
+    observable
+], App.prototype, "accentPalette", void 0);
+__decorate([
+    observable
+], App.prototype, "showOnlyLayerBackgrounds", void 0);
+App = __decorate([
+    customElement({
+        name: 'app-main',
+        template,
+        styles,
+    })
+], App);
+export { App };

package/dist/esm/_docs/design-system/color-explorer/colors.js

@@ -0,0 +1,24 @@
+export var AccentColors;
+(function (AccentColors) {
+    AccentColors["black"] = "#000000";
+    AccentColors["white"] = "#FFFFFF";
+    AccentColors["magenta"] = "#DA1A5F";
+    AccentColors["blue"] = "#0078D4";
+    AccentColors["green"] = "#107C10";
+    AccentColors["purple"] = "#5C2D91";
+    AccentColors["orange"] = "#D83B01";
+    AccentColors["yellow"] = "#F2C812";
+})(AccentColors || (AccentColors = {}));
+export const neutralColors = [
+    '#808080',
+    '#73818C',
+    '#718E71',
+    '#7F738C',
+    '#8C7A73',
+    '#0078D4',
+    '#107C10',
+    '#5C2D91',
+    '#D83B01',
+];
+export const defaultAccentColor = AccentColors.blue;
+export const defaultNeutralColor = neutralColors[0];

package/dist/esm/_docs/design-system/color-explorer/component-types.js

@@ -0,0 +1,7 @@
+export var ComponentTypes;
+(function (ComponentTypes) {
+    ComponentTypes["backplate"] = "backplate";
+    ComponentTypes["text"] = "text";
+    ComponentTypes["form"] = "form";
+    ComponentTypes["sample"] = "sample";
+})(ComponentTypes || (ComponentTypes = {}));

package/dist/esm/_docs/design-system/color-explorer/components/color-block.js

@@ -0,0 +1,408 @@
+import { __decorate } from "tslib";
+import { parseColorHexRGB } from '@microsoft/fast-colors';
+import { attr, css, customElement, DOM, FASTElement, html, when } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { accentFillActive, accentFillHover, accentFillRest, accentForegroundActive, accentForegroundHover, accentForegroundRest, fillColor, focusStrokeInner, focusStrokeOuter, foregroundOnAccentRest, neutralFillActive, neutralFillHover, neutralFillInputRest, neutralFillRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralFillStrongActive, neutralFillStrongHover, neutralFillStrongRest, neutralForegroundHint, neutralForegroundRest, neutralStrokeActive, neutralStrokeDividerRest, neutralStrokeHover, neutralStrokeRest, SwatchRGB, } from '../../../../index-rollup';
+import { ComponentTypes } from '../component-types';
+import { AppSwatch } from './swatch';
+AppSwatch;
+const backplateComponents = html `
+  <template>
+    <div class="example">
+      <fluent-button appearance="accent">Accent</fluent-button>
+    </div>
+    <app-swatch
+      type="fill"
+      recipe-name="accentFillRest"
+      :fillRecipe="${x => accentFillRest}"
+      :foregroundRecipe="${x => foregroundOnAccentRest}"
+    ></app-swatch>
+    <app-swatch
+      type="fill"
+      recipe-name="accentFillHover"
+      :fillRecipe="${x => accentFillHover}"
+      :foregroundRecipe="${x => foregroundOnAccentRest}"
+    ></app-swatch>
+    <app-swatch
+      type="fill"
+      recipe-name="accentFillActive"
+      :fillRecipe="${x => accentFillActive}"
+      :foregroundRecipe="${x => foregroundOnAccentRest}"
+    ></app-swatch>
+    <app-swatch
+      type="foreground"
+      recipe-name="foregroundOnAccent"
+      :fillRecipe="${x => accentFillRest}"
+      :foregroundRecipe="${x => foregroundOnAccentRest}"
+    ></app-swatch>
+    <app-swatch
+      type="outline"
+      recipe-name="focusStrokeInner"
+      :fillRecipe="${x => focusStrokeOuter}"
+      :foregroundRecipe="${x => focusStrokeInner}"
+      :outlineRecipe="${x => focusStrokeInner}"
+    ></app-swatch>
+    <app-swatch
+      type="outline"
+      recipe-name="focusStrokeOuter"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => focusStrokeOuter}"
+      :outlineRecipe="${x => focusStrokeOuter}"
+    ></app-swatch>
+
+    <div class="example">
+      <fluent-button>Neutral</fluent-button>
+    </div>
+    <app-swatch
+      type="fill"
+      recipe-name="neutralFillRest"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+      :fillRecipe="${x => neutralFillRest}"
+    ></app-swatch>
+    <app-swatch
+      type="fill"
+      recipe-name="neutralFillHover"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+      :fillRecipe="${x => neutralFillHover}"
+    ></app-swatch>
+    <app-swatch
+      type="fill"
+      recipe-name="neutralFillActive"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+      :fillRecipe="${x => neutralFillActive}"
+    ></app-swatch>
+    <app-swatch
+      type="foreground"
+      recipe-name="neutralForegroundRest"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+    ></app-swatch>
+    <app-swatch
+      type="outline"
+      recipe-name="focusStrokeOuter"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => focusStrokeOuter}"
+      :outlineRecipe="${x => focusStrokeOuter}"
+    ></app-swatch>
+
+    <div class="example">
+      <fluent-button appearance="outline">Outline</fluent-button>
+    </div>
+    <app-swatch
+      type="outline"
+      recipe-name="neutralStrokeRest"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+      :fillRecipe="${x => fillColor}"
+      :outlineRecipe="${x => neutralStrokeRest}"
+    ></app-swatch>
+    <app-swatch
+      type="outline"
+      recipe-name="neutralStrokeHover"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+      :fillRecipe="${x => fillColor}"
+      :outlineRecipe="${x => neutralStrokeHover}"
+    ></app-swatch>
+    <app-swatch
+      type="outline"
+      recipe-name="neutralStrokeActive"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+      :fillRecipe="${x => fillColor}"
+      :outlineRecipe="${x => neutralStrokeActive}"
+    ></app-swatch>
+    <app-swatch
+      type="foreground"
+      recipe-name="neutralForegroundRest"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+    ></app-swatch>
+    <app-swatch
+      type="outline"
+      recipe-name="focusStrokeOuter"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => focusStrokeOuter}"
+      :outlineRecipe="${x => focusStrokeOuter}"
+    ></app-swatch>
+
+    <div class="example">
+      <fluent-button appearance="stealth">Stealth</fluent-button>
+    </div>
+    <app-swatch
+      type="fill"
+      recipe-name="neutralFillStealthRest"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+      :fillRecipe="${x => neutralFillStealthRest}"
+    ></app-swatch>
+    <app-swatch
+      type="fill"
+      recipe-name="neutralFillStealthHover"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+      :fillRecipe="${x => neutralFillStealthHover}"
+    ></app-swatch>
+    <app-swatch
+      type="fill"
+      recipe-name="neutralFillStealthActive"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+      :fillRecipe="${x => neutralFillStealthActive}"
+    ></app-swatch>
+    <app-swatch
+      type="foreground"
+      recipe-name="neutralForegroundRest"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+    ></app-swatch>
+    <app-swatch
+      type="outline"
+      recipe-name="focusStrokeOuter"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => focusStrokeOuter}"
+      :outlineRecipe="${x => focusStrokeOuter}"
+    ></app-swatch>
+  </template>
+`;
+const textComponents = html `
+  <template>
+    <div class="example">
+      <p>Neutral</p>
+    </div>
+    <app-swatch
+      type="foreground"
+      recipe-name="neutralForegroundRest"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+    ></app-swatch>
+
+    <div class="example">
+      <p class="hint_text">Hint</p>
+    </div>
+    <app-swatch
+      type="foreground"
+      recipe-name="neutralForegroundHint"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => neutralForegroundHint}"
+    ></app-swatch>
+
+    <div class="example">
+      <fluent-anchor href="#" appearance="hypertext">Accent</fluent-anchor>
+    </div>
+    <app-swatch
+      type="foreground"
+      recipe-name="accentForegroundRest"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => accentForegroundRest}"
+    ></app-swatch>
+    <app-swatch
+      type="foreground"
+      recipe-name="accentForegroundHover"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => accentForegroundHover}"
+    ></app-swatch>
+    <app-swatch
+      type="foreground"
+      recipe-name="accentForegroundActive"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => accentForegroundActive}"
+    ></app-swatch>
+    <app-swatch
+      type="outline"
+      recipe-name="focusStrokeOuter"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => focusStrokeOuter}"
+      :outlineRecipe="${x => focusStrokeOuter}"
+    ></app-swatch>
+  </template>
+`;
+const formComponents = html `
+  <template>
+    <div class="example">
+      <fluent-text-field placeholder="jerry@microsoft.com"></fluent-text-field>
+    </div>
+    <app-swatch
+      type="fill"
+      recipe-name="neutralFillInputRest"
+      :fillRecipe="${x => neutralFillInputRest}"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+    ></app-swatch>
+    <app-swatch
+      type="foreground"
+      recipe-name="neutralForegroundHint"
+      :fillRecipe="${x => neutralFillInputRest}"
+      :foregroundRecipe="${x => neutralForegroundHint}"
+    ></app-swatch>
+    <app-swatch
+      type="foreground"
+      recipe-name="neutralForegroundRest"
+      :fillRecipe="${x => neutralFillInputRest}"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+    ></app-swatch>
+    <app-swatch
+      type="outline"
+      recipe-name="neutralStrokeRest"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+      :outlineRecipe="${x => neutralStrokeRest}"
+    ></app-swatch>
+    <app-swatch
+      type="outline"
+      recipe-name="neutralStrokeHover"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+      :outlineRecipe="${x => neutralStrokeHover}"
+    ></app-swatch>
+    <app-swatch
+      type="outline"
+      recipe-name="focusStrokeOuter"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => focusStrokeOuter}"
+      :outlineRecipe="${x => focusStrokeOuter}"
+    ></app-swatch>
+
+    <div class="example">
+      <fluent-checkbox>Checkbox</fluent-checkbox>
+    </div>
+    <app-swatch
+      type="fill"
+      recipe-name="neutralFillInputRest"
+      :fillRecipe="${x => neutralFillInputRest}"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+    ></app-swatch>
+    <app-swatch
+      type="fill"
+      recipe-name="neutralFillStrongRest"
+      :fillRecipe="${x => neutralFillStrongRest}"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+    ></app-swatch>
+    <app-swatch
+      type="fill"
+      recipe-name="neutralFillStrongHover"
+      :fillRecipe="${x => neutralFillStrongHover}"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+    ></app-swatch>
+    <app-swatch
+      type="fill"
+      recipe-name="neutralFillStrongActive"
+      :fillRecipe="${x => neutralFillStrongActive}"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+    ></app-swatch>
+    <app-swatch
+      type="foreground"
+      recipe-name="neutralForegroundRest"
+      :fillRecipe="${x => neutralFillInputRest}"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+    ></app-swatch>
+    <app-swatch
+      type="outline"
+      recipe-name="focusStrokeOuter"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => focusStrokeOuter}"
+      :outlineRecipe="${x => focusStrokeOuter}"
+    ></app-swatch>
+
+    <div class="example">
+      <fluent-divider class="divider"></fluent-divider>
+    </div>
+    <app-swatch
+      type="outline"
+      recipe-name="neutralStrokeDividerRest"
+      :fillRecipe="${x => fillColor}"
+      :foregroundRecipe="${x => neutralForegroundRest}"
+      :outlineRecipe="${x => neutralStrokeDividerRest}"
+    ></app-swatch>
+  </template>
+`;
+const template = html `
+  <p class="title">
+    SWATCH ${x => x.index} - ${x => x.color.toUpperCase()}
+    ${when(x => x.layerName, html `
+        <p>
+          <code>${x => x.layerName}</code>
+        </p>
+      `)}
+  </p>
+
+  <div class="content">
+    ${when(x => x.component === ComponentTypes.backplate, backplateComponents)}
+    ${when(x => x.component === ComponentTypes.text, textComponents)}
+    ${when(x => x.component === ComponentTypes.form, formComponents)}
+  </div>
+`;
+const styles = css `
+  ${display('flex')}
+
+  :host {
+    flex-direction: column;
+    flex-grow: 1;
+    align-items: stretch;
+    text-align: center;
+    position: relative;
+    transition: opacity 0.1s linear;
+    height: 100%;
+    min-height: 100%;
+    background-color: ${fillColor};
+    color: ${neutralForegroundRest};
+  }
+
+  .title {
+    margin: 16px auto 4px;
+    font-weight: 600;
+    height: 34px;
+    color: ${neutralForegroundHint};
+  }
+
+  .title code {
+    font-weight: normal;
+  }
+
+  .content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 48px 36px;
+  }
+
+  .example {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    margin-top: 24px;
+  }
+
+  .hint_text {
+    color: ${neutralForegroundHint};
+  }
+
+  .divider {
+    width: 150px;
+  }
+`;
+let AppColorBlock = class AppColorBlock extends FASTElement {
+    colorChanged() {
+        DOM.queueUpdate(() => this.updateColor());
+    }
+    updateColor() {
+        if (this.color && this.$fastController.isConnected) {
+            const color = parseColorHexRGB(this.color);
+            fillColor.setValueFor(this, SwatchRGB.from(color));
+        }
+    }
+};
+__decorate([
+    attr
+], AppColorBlock.prototype, "index", void 0);
+__decorate([
+    attr
+], AppColorBlock.prototype, "component", void 0);
+__decorate([
+    attr
+], AppColorBlock.prototype, "color", void 0);
+__decorate([
+    attr({ attribute: 'layer-name' })
+], AppColorBlock.prototype, "layerName", void 0);
+AppColorBlock = __decorate([
+    customElement({
+        name: 'app-color-block',
+        template,
+        styles,
+    })
+], AppColorBlock);
+export { AppColorBlock };