@esri/calcite-components 1.4.0-next.1 → 1.4.0-next.10

package/dist/extras/vscode-data.json

@@ -686,7 +686,11 @@
       "attributes": [
         {
           "name": "full-name",
-          "description": "Specifies the full name of the user."
+          "description": "Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component."
+        },
+        {
+          "name": "label",
+          "description": "Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label."
         },
         {
           "name": "scale",
@@ -1227,7 +1231,15 @@
       "attributes": [
         {
           "name": "allow-empty",
-          "description": "When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.\n\nWhen `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`."
+          "description": "When `true`, an empty color (`null`) will be allowed as a `value`. When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`."
+        },
+        {
+          "name": "alpha-channel",
+          "description": "When true, the component will allow updates to the color's alpha value."
+        },
+        {
+          "name": "channels-disabled",
+          "description": "When true, hides the RGB/HSV channel inputs"
         },
         {
           "name": "disabled",
@@ -1278,13 +1290,17 @@
             }
           ]
         },
+        {
+          "name": "hex-disabled",
+          "description": "When true, hides the hex input"
+        },
         {
           "name": "hide-channels",
           "description": "When `true`, hides the RGB/HSV channel inputs."
         },
         {
           "name": "hide-hex",
-          "description": "When `true`, hides the Hex input."
+          "description": "When `true`, hides the hex input."
         },
         {
           "name": "hide-saved",
@@ -1362,6 +1378,10 @@
             }
           ]
         },
+        {
+          "name": "saved-disabled",
+          "description": "When true, hides the saved colors section"
+        },
         {
           "name": "scale",
           "description": "Specifies the size of the component.",
@@ -1398,6 +1418,10 @@
           "name": "allow-empty",
           "description": "When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.\n\nWhen `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`."
         },
+        {
+          "name": "alpha-channel",
+          "description": "When true, the component will allow updates to the color's alpha value."
+        },
         {
           "name": "hex-label",
           "description": "Specifies accessible label for the input field."
@@ -1491,7 +1515,7 @@
         },
         {
           "name": "value",
-          "description": "The Hex value."
+          "description": "The hex value."
         }
       ]
     },

package/dist/loader/cdn.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.1
+ * v1.4.0-next.10
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.1
+ * v1.4.0-next.10
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.1
+ * v1.4.0-next.10
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.1
+ * v1.4.0-next.10
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

package/dist/types/components/avatar/avatar.d.ts

@@ -5,12 +5,14 @@ export declare class Avatar {
   scale: Scale;
   /** Specifies the `src` to an image (remember to add a token if the user is private). */
   thumbnail: string;
-  /** Specifies the full name of the user. */
+  /** Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component. */
   fullName: string;
   /** Specifies the username of the user. */
   username: string;
   /** Specifies the unique id of the user. */
   userId: string;
+  /** Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label.*/
+  label: string;
   render(): any;
   thumbnailFailedToLoad: boolean;
   private determineContent;

package/dist/types/components/color-picker/color-picker.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import Color from "color";
+import { Channels, ColorMode, ColorValue, InternalColor } from "./interfaces";
 import { Scale } from "../interfaces";
-import { ColorMode, ColorValue, InternalColor } from "./interfaces";
 import { Format } from "./utils";
 import { InteractiveComponent } from "../../utils/interactive";
 import { LoadableComponent } from "../../utils/loadable";
@@ -11,11 +11,16 @@ import { ColorPickerMessages } from "./assets/color-picker/t9n";
 export declare class ColorPicker implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {
   el: HTMLCalciteColorPickerElement;
   /**
-   * When `false`, an empty color (`null`) will be allowed as a `value`. Otherwise, a color value is enforced on the component.
-   *
-   * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
+   * When `true`, an empty color (`null`) will be allowed as a `value`. When `false`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`.
    */
   allowEmpty: boolean;
+  /**
+   * When true, the component will allow updates to the color's alpha value.
+   */
+  alphaChannel: boolean;
+  handleAlphaChannelChange(alphaChannel: boolean): void;
+  /** When true, hides the RGB/HSV channel inputs */
+  channelsDisabled: boolean;
   /**
    * Internal prop for advanced use-cases.
    *
@@ -35,13 +40,29 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
    * @default "auto"
    */
   format: Format;
-  handleFormatChange(format: ColorPicker["format"]): void;
-  /** When `true`, hides the Hex input. */
-  hideHex: boolean;
-  /** When `true`, hides the RGB/HSV channel inputs. */
+  handleFormatChange(format: Format): void;
+  /**
+   * When `true`, hides the RGB/HSV channel inputs.
+   *
+   * @deprecated use `channelsDisabled` instead
+   */
   hideChannels: boolean;
-  /** When `true`, hides the saved colors section. */
+  /** When true, hides the hex input */
+  hexDisabled: boolean;
+  /**
+   * When `true`, hides the hex input.
+   *
+   * @deprecated use `hexDisabled` instead
+   */
+  hideHex: boolean;
+  /**
+   * When `true`, hides the saved colors section.
+   *
+   * @deprecated use `savedDisabled` instead
+   */
   hideSaved: boolean;
+  /** When true, hides the saved colors section */
+  savedDisabled: boolean;
   /** Specifies the size of the component. */
   scale: Scale;
   handleScaleChange(scale?: Scale): void;
@@ -65,22 +86,22 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
    */
   value: ColorValue | null;
   handleValueChange(value: ColorValue | null, oldValue: ColorValue | null): void;
+  private activeCanvasInfo;
   private get baseColorFieldColor();
-  private activeColorFieldAndSliderRect;
-  private colorFieldAndSliderHovered;
-  private fieldAndSliderRenderingContext;
+  private checkerPattern;
+  private colorFieldRenderingContext;
   private colorFieldScopeNode;
-  private hueThumbState;
+  private hueSliderRenderingContext;
   private hueScopeNode;
   private internalColorUpdateContext;
-  private previousColor;
   private mode;
+  private opacityScopeNode;
+  private opacitySliderRenderingContext;
+  private previousColor;
   private shiftKeyChannelAdjustment;
-  private sliderThumbState;
   defaultMessages: ColorPickerMessages;
-  colorFieldAndSliderInteractive: boolean;
   channelMode: ColorMode;
-  channels: [number, number, number];
+  channels: Channels;
   dimensions: {
     slider: {
       height: number;
@@ -105,9 +126,9 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
   savedColors: string[];
   colorFieldScopeTop: number;
   colorFieldScopeLeft: number;
-  scopeOrientation: "vertical" | "horizontal";
   hueScopeLeft: number;
-  hueScopeTop: number;
+  opacityScopeLeft: number;
+  scopeOrientation: "vertical" | "horizontal";
   /**
    * Fires when the color value has changed.
    */
@@ -127,11 +148,11 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
   protected handleChannelKeyUpOrDown(event: KeyboardEvent): void;
   private handleChannelChange;
   private handleSavedColorKeyDown;
-  private handleColorFieldAndSliderPointerLeave;
-  private handleColorFieldAndSliderPointerDown;
+  private handleColorFieldPointerDown;
+  private handleHueSliderPointerDown;
+  private handleOpacitySliderPointerDown;
   private globalPointerUpHandler;
   private globalPointerMoveHandler;
-  private handleColorFieldAndSliderPointerEnterOrMove;
   /** Sets focus on the component's first focusable element. */
   setFocus(): Promise<void>;
   componentWillLoad(): Promise<void>;
@@ -148,25 +169,33 @@ export declare class ColorPicker implements InteractiveComponent, LoadableCompon
   handleKeyDown(event: KeyboardEvent): void;
   private showIncompatibleColorWarning;
   private setMode;
+  private ensureCompatibleMode;
   private captureHueSliderColor;
-  private getCanvasRegion;
+  private captureOpacitySliderValue;
   private internalColorSet;
   private toValue;
   private getSliderCapSpacing;
   private updateDimensions;
   private deleteColor;
   private saveColor;
-  private drawColorFieldAndSlider;
+  private drawColorControls;
   private drawColorField;
   private setCanvasContextSize;
   private captureColorFieldColor;
-  private initColorFieldAndSlider;
+  private initColorField;
+  private initHueSlider;
+  private initOpacitySlider;
   private updateCanvasSize;
-  private containsPoint;
   private drawActiveColorFieldColor;
   private drawThumb;
   private drawActiveHueSliderColor;
   private drawHueSlider;
+  private drawOpacitySlider;
+  private drawSliderPath;
+  private getCheckeredBackgroundPattern;
+  private drawActiveOpacitySliderColor;
+  private storeOpacityScope;
+  private handleOpacityScopeKeyDown;
   private updateColorFromChannels;
   private updateChannelsFromColor;
   private toChannels;

package/dist/types/components/color-picker/interfaces.d.ts

@@ -1,5 +1,6 @@
 import type Color from "color";
 export type ColorMode = "rgb" | "hsv";
+export type Channels = [number, number, number, number];
 export type InternalColor = Color;
 export type ColorValue = string | RGB | RGBA | HSV | HSVA | HSL | HSLA;
 export interface RGB {

package/dist/types/components/color-picker/resources.d.ts

@@ -1,29 +1,35 @@
 import Color from "color";
 export declare const CSS: {
+  channel: string;
+  channels: string;
+  colorField: string;
+  colorFieldScope: string;
+  colorMode: string;
+  colorModeContainer: string;
   container: string;
+  control: string;
+  controlAndScope: string;
   controlSection: string;
-  hexOptions: string;
-  section: string;
+  deleteColor: string;
   header: string;
-  control: string;
-  splitSection: string;
-  colorModeContainer: string;
-  colorMode: string;
-  channels: string;
-  channel: string;
-  savedColors: string;
-  savedColorsSection: string;
+  hexAndChannelsGroup: string;
+  hexOptions: string;
+  hueScope: string;
+  hueSlider: string;
+  opacityScope: string;
+  opacitySlider: string;
+  preview: string;
+  previewAndSliders: string;
   saveColor: string;
-  deleteColor: string;
+  savedColor: string;
+  savedColors: string;
   savedColorsButtons: string;
-  headerHex: string;
-  colorFieldAndSlider: string;
-  colorFieldAndSliderInteractive: string;
-  colorFieldAndSliderWrap: string;
+  savedColorsSection: string;
   scope: string;
-  hueScope: string;
-  colorFieldScope: string;
-  savedColor: string;
+  section: string;
+  slider: string;
+  sliders: string;
+  splitSection: string;
 };
 export declare const DEFAULT_COLOR: Color<"#007AC2">;
 export declare const DEFAULT_STORAGE_KEY_PREFIX = "calcite-color-";
@@ -37,6 +43,10 @@ export declare const HSV_LIMITS: {
   s: number;
   v: number;
 };
+export declare const OPACITY_LIMITS: {
+  min: number;
+  max: number;
+};
 export declare const DIMENSIONS: {
   s: {
     slider: {

package/dist/types/components/color-picker/utils.d.ts

@@ -1,12 +1,18 @@
-import { ColorValue, RGB } from "./interfaces";
+import { ColorValue, HSLA, HSVA, RGB, RGBA } from "./interfaces";
 import Color from "color";
-export declare function rgbToHex(color: RGB): string;
 export declare const hexChar: RegExp;
-export declare function isValidHex(hex: string): boolean;
-export declare function isShorthandHex(hex: string): boolean;
-export declare function isLonghandHex(hex: string): boolean;
-export declare function normalizeHex(hex: string): string;
-export declare function hexToRGB(hex: string): RGB;
+export declare const alphaToOpacity: (alpha: number) => number;
+export declare const opacityToAlpha: (opacity: number) => number;
+export declare function isValidHex(hex: string, hasAlpha?: boolean): boolean;
+export declare function canConvertToHexa(hex: string): boolean;
+export declare function isShorthandHex(hex: string, hasAlpha?: boolean): boolean;
+export declare function isLonghandHex(hex: string, hasAlpha?: boolean): boolean;
+export declare function normalizeHex(hex: string, hasAlpha?: boolean, convertFromHexToHexa?: boolean): string;
+export declare function hexify(color: Color, hasAlpha?: boolean): string;
+export declare function rgbToHex(color: RGB | RGBA): string;
+export declare function normalizeAlpha<T extends RGBA | HSVA | HSLA>(colorObject: ReturnType<Color["object"]>): T;
+export declare function normalizeColor(alphaColorObject: RGBA | HSVA | HSLA): ReturnType<Color["object"]>;
+export declare function hexToRGB(hex: string, hasAlpha?: boolean): RGB | RGBA;
 type Enumify<T> = T[keyof T];
 export declare const CSSColorMode: {
   HEX: "hex";
@@ -30,4 +36,7 @@ export type SupportedMode = CSSColorMode | ObjectColorMode;
 export type Format = "auto" | SupportedMode;
 export declare function parseMode(colorValue: ColorValue): SupportedMode | null;
 export declare function colorEqual(value1: Color | null, value2: Color | null): boolean;
+export declare function alphaCompatible(mode: SupportedMode): boolean;
+export declare function toAlphaMode(mode: SupportedMode): SupportedMode;
+export declare function toNonAlphaMode(mode: SupportedMode): SupportedMode;
 export {};

package/dist/types/components/color-picker-hex-input/color-picker-hex-input.d.ts

@@ -1,14 +1,11 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
 import Color from "color";
 import { LoadableComponent } from "../../utils/loadable";
 import { NumberingSystem } from "../../utils/locale";
-import { Scale } from "../interfaces";
+import { ColorPickerMessages } from "../color-picker/assets/color-picker/t9n";
 export declare class ColorPickerHexInput implements LoadableComponent {
   el: HTMLCalciteColorPickerHexInputElement;
-  /**
-   * Specifies accessible label for the input field.
-   */
-  hexLabel: string;
   connectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
@@ -18,35 +15,55 @@ export declare class ColorPickerHexInput implements LoadableComponent {
    * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
    */
   allowEmpty: boolean;
+  /**
+   * When true, the component will allow updates to the color's alpha value.
+   */
+  alphaChannel: boolean;
+  /**
+   * Specifies accessible label for the input field.
+   *
+   * @deprecated use `messages` instead
+   */
+  hexLabel: string;
+  /**
+   * Messages are passed by parent component for accessible labels.
+   *
+   * @internal
+   */
+  messages: ColorPickerMessages;
+  /** Specifies the Unicode numeral system used by the component for localization. */
+  numberingSystem?: NumberingSystem;
   /** Specifies the size of the component. */
   scale: Scale;
   /**
-   * The Hex value.
+   * The hex value.
    */
   value: string;
-  /** Specifies the Unicode numeral system used by the component for localization. */
-  numberingSystem?: NumberingSystem;
   handleValueChange(value: string, oldValue: string): void;
   /**
    * Emitted when the hex value changes.
    */
   calciteColorPickerHexInputChange: EventEmitter<void>;
-  private onCalciteInternalInputBlur;
-  private onInputChange;
-  protected onInputKeyDown(event: KeyboardEvent): void;
-  private onPaste;
-  private inputNode;
+  private onHexInputBlur;
+  private onOpacityInputBlur;
+  private onHexInputChange;
+  private onOpacityInputChange;
+  protected onInputKeyDown: (event: KeyboardEvent) => void;
+  private onHexInputPaste;
+  private hexInputNode;
   /**
    * The last valid/selected color. Used as a fallback if an invalid hex code is entered.
    */
   internalColor: Color | null;
+  private opacityInputNode;
   private previousNonNullValue;
   render(): VNode;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   private internalSetValue;
-  private storeInputRef;
-  private formatForInternalInput;
+  private storeHexInputRef;
+  private storeOpacityInputRef;
+  private formatHexForInternalInput;
+  private formatOpacityForInternalInput;
   private nudgeRGBChannels;
-  handleKeyDown(event: KeyboardEvent): void;
 }

package/dist/types/components/color-picker-hex-input/resources.d.ts

@@ -1,5 +1,5 @@
 export declare const CSS: {
   container: string;
-  preview: string;
-  input: string;
+  hexInput: string;
+  opacityInput: string;
 };

package/dist/types/components/color-picker-swatch/color-picker-swatch.d.ts

@@ -10,8 +10,8 @@ export declare class ColorPickerSwatch {
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
    */
-  color: string;
-  handleColorChange(color: string): void;
+  color: string | null;
+  handleColorChange(color: string | null): void;
   /**
    * Specifies the size of the component.
    */
@@ -20,4 +20,5 @@ export declare class ColorPickerSwatch {
   private internalColor;
   componentWillLoad(): void;
   render(): VNode;
+  renderSwatch(): VNode;
 }

package/dist/types/components/color-picker-swatch/resources.d.ts

@@ -1,8 +1,13 @@
 export declare const CSS: {
   swatch: string;
-  noColorIcon: string;
+  noColorSwatch: string;
+  checker: string;
 };
 export declare const COLORS: {
   borderLight: string;
   borderDark: string;
 };
+export declare const CHECKER_DIMENSIONS: {
+  squareSize: number;
+  size: number;
+};

package/dist/types/components/flow-item/flow-item.d.ts

@@ -13,7 +13,7 @@ import { FlowItemMessages } from "./assets/flow-item/t9n";
  * @slot header-content - A slot for adding custom content to the component's header.
  * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
  * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
- * @slot footer-actions - A slot for adding `calcite-button`s to the component's footer.
+ * @slot footer-actions - [Deprecated] A slot for adding `calcite-button`s to the component's footer.
  * @slot footer - A slot for adding custom content to the component's footer.
  */
 export declare class FlowItem implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {

package/dist/types/components/list/list.d.ts

@@ -68,13 +68,18 @@ export declare class List implements InteractiveComponent, LoadableComponent {
    */
   selectionAppearance: SelectionAppearance;
   handleSelectionAppearanceChange(): void;
+  /**
+   * Emits when any of the list item selections have changed.
+   */
+  calciteListChange: EventEmitter<void>;
   /**
    * Emits when the component's filter has changed.
    */
   calciteListFilter: EventEmitter<void>;
   handleCalciteInternalFocusPreviousItem(event: CustomEvent): void;
-  handleCalciteListItemActive(event: CustomEvent): void;
-  handleCalciteListItemSelect(event: CustomEvent): void;
+  handleCalciteInternalListItemActive(event: CustomEvent): void;
+  handleCalciteListItemSelect(): void;
+  handleCalciteInternalListItemSelect(event: CustomEvent): void;
   handleCalciteListItemClose(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;

package/dist/types/components/list/resources.d.ts

@@ -5,5 +5,5 @@ export declare const CSS: {
   tableContainer: string;
   sticky: string;
 };
-export declare const debounceTimeout = 100;
+export declare const debounceTimeout = 0;
 export type SelectionAppearance = "border" | "icon";

package/dist/types/components/panel/panel.d.ts

@@ -13,7 +13,7 @@ import { PanelMessages } from "./assets/panel/t9n";
  * @slot header-content - A slot for adding custom content to the header.
  * @slot header-menu-actions - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
  * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
- * @slot footer-actions - A slot for adding buttons to the footer.
+ * @slot footer-actions - [Deprecated] A slot for adding buttons to the footer.
  * @slot footer - A slot for adding custom content to the footer.
  */
 export declare class Panel implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {

package/dist/types/components/tooltip/TooltipManager.d.ts

@@ -2,14 +2,14 @@ import { ReferenceElement } from "../../utils/floating-ui";
 export default class TooltipManager {
   private registeredElements;
   private hoverTimeout;
+  private hoveredTooltip;
   private clickedTooltip;
-  private activeTooltipEl;
+  private activeTooltip;
   private registeredElementCount;
   registerElement(referenceEl: ReferenceElement, tooltip: HTMLCalciteTooltipElement): void;
   unregisterElement(referenceEl: ReferenceElement): void;
   private queryTooltip;
   private keyDownHandler;
-  private queryHoveredTooltip;
   private pointerMoveHandler;
   private pointerDownHandler;
   private focusInHandler;
@@ -22,4 +22,5 @@ export default class TooltipManager {
   private toggleTooltip;
   private toggleHoveredTooltip;
   private queryFocusedTooltip;
+  private isClosableClickedTooltip;
 }

package/dist/types/components/tree-item/tree-item.d.ts

@@ -103,8 +103,10 @@ export declare class TreeItem implements ConditionalSlotComponent, InteractiveCo
   updateAfterInitialRender: boolean;
   childrenSlotWrapper: HTMLElement;
   defaultSlotWrapper: HTMLElement;
+  actionSlotWrapper: HTMLElement;
   private parentTreeItem?;
   hasEndActions: boolean;
+  private isActionEndEvent;
   private updateParentIsExpanded;
   /**
    * This is meant to be called in `componentDidLoad` in order to take advantage of the hierarchical component lifecycle