@fluentui/web-components 2.5.11 → 3.0.0-alpha.1

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

@@ -1,247 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,408 +0,0 @@
-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 };