@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

package/lib/types/components/duet-alert/duet-alert.d.ts

@@ -14,7 +14,6 @@ export declare class DuetAlert implements ThemeableComponent {
     private descriptiveId;
     private alertContainer;
     private hasShowMoreSlot;
-    private iconVariationMap;
     element: HTMLElement;
     /**
      * Theme of the card.
@@ -25,6 +24,7 @@ export declare class DuetAlert implements ThemeableComponent {
      * Inlined decorator, alphabetical order.
      */
     isDismissed: boolean;
+    isExpanded: boolean;
     /**
      * Timeout Id for auto dismiss setTimeout
      */
@@ -41,11 +41,13 @@ export declare class DuetAlert implements ThemeableComponent {
      */
     accessibleLabel: string;
     /**
-     * Enable or disabled announcements by assistive technologies.
+     * Enable or disabled announcements by assistive technologies. If the alert is present already on page load, this usually
+     * should be set to false, so that it is not read out first.
      */
     announcements: boolean;
     /**
-     * Icon to display to the left of the content.
+     * Icon to display to the left of the content, overriding the default status icon. As the alert now uses default status icons,
+     * use of this property is discouraged, and it is being considered for deprication.
      */
     icon: DuetIconName;
     /**
@@ -61,7 +63,10 @@ export declare class DuetAlert implements ThemeableComponent {
      */
     padding: DuetPadding;
     /**
-     * Style variation of the alert.
+     * Status variation of the alert. "danger" and "warning" will render the alert with role "alert" (unless announcements
+     * has been set to false). Other variations will have role "status". Use "danger" only when something serious has happened
+     * or the user must take immediate action. Use "warning" for unexpected situations that are potentially harmful, but
+     * don't require immediate action.
      */
     variation: DuetStatus;
     /**
@@ -70,13 +75,19 @@ export declare class DuetAlert implements ThemeableComponent {
      */
     position: "below-nav" | "content";
     /**
-     * Should a button be rendered to dismiss the alert?
+     * Show a button to dismiss the alert. Note that this has no effect when expandingTitle is used.
      */
     dismissible: boolean;
     /**
-     * Should it be possible to focus on alert?
+     * @deprecated - if you need to set focus, use a focusable element inside
+     * Make alert focusable.
      */
     focusable: boolean;
+    /**
+     * When given, the expanding title is initially shown and the content of the alert is hidden. The title acts as a
+     * toggle button for showing/hiding the content. Note that you can't make an expanding alert dismissible.
+     */
+    expandingTitle: string;
     /**
      * Emitted when the dismiss button is clicked
      */
@@ -101,15 +112,14 @@ export declare class DuetAlert implements ThemeableComponent {
      */
     hide(): Promise<void>;
     /**
-     * Sets focus on the specified `duet-alert`.
-     * Works only when focusable property is set to true.
-     * Use this method instead of the global
-     * `button.focus()`.
+     * @deprecated - if you need to set focus, use a focusable element inside
      */
     setFocus(options?: FocusOptions): Promise<void>;
     private handleDismiss;
     private handleShow;
     private handleHide;
+    private handleExpandToggle;
+    private getRole;
     /**
      * There is bug in NVDA screen reader
      * that is causing multiple alert readings

package/lib/types/components/duet-badge/duet-badge.d.ts

@@ -23,6 +23,7 @@ export declare class DuetBadge implements ThemeableComponent {
      * Component lifecycle events.
      */
     componentWillLoad(): void;
+    private getVariationLabel;
     /**
      * render() function
      * Always the last one of the class.

package/lib/types/components/duet-banner/duet-banner.d.ts

@@ -71,6 +71,8 @@ export declare class DuetBanner implements ThemeableComponent {
      * Default to smaller button size for small and medium banners.
      */
     private setButtonSize;
+    private isTurva2;
+    private getBackgroundColor;
     /**
      * render() function
      * Always the last one of the class.

package/lib/types/components/duet-breadcrumbs/duet-breadcrumb.d.ts

@@ -1,15 +1,13 @@
-import { DuetIconName, DuetIconSize, DuetLanguage, DuetTheme } from "../../common-types";
+import { DuetIconName, DuetIconSize, DuetTheme } from "../../common-types";
 import { ThemeableComponent } from "../../common/themeable-component";
 export declare class DuetBreadcrumb implements ThemeableComponent {
-    private currentCrumb;
     element: HTMLDivElement;
     /**
      * Theme
      */
     theme: DuetTheme;
-    language: DuetLanguage;
     /**
-     * Href
+     * Href for the link. Should be left empty for the last item, which should be the current page.
      */
     href: string;
     /**

package/lib/types/components/duet-button/duet-button.d.ts

@@ -2,7 +2,7 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { A11yComponent, FormComponent, ThemeableComponent } from "../../common";
 import { DuetColor, DuetIconName, DuetLanguage, DuetMargin, DuetPadding, DuetTheme } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
-export type DuetButtonVariation = "default" | "primary" | "secondary" | "negative" | "destructive" | "destructive-primary" | "destructive-secondary" | "plain" | "input-button-primary" | "input-button-secondary" | "input-button-embedded" | "square";
+export type DuetButtonVariation = "default" | "primary" | "secondary" | "negative" | "destructive" | "destructive-primary" | "destructive-secondary" | "plain" | "input-button-primary" | "input-button-secondary" | "input-button-embedded" | "input-button-left-primary" | "input-button-left-secondary" | "square";
 export type DuetButtonNegative = true | false | undefined;
 export type DuetButtonWrapping = "auto" | "none";
 export type DuetButtonTextCentering = true | false | undefined;

package/lib/types/components/duet-card/duet-card.d.ts

@@ -74,6 +74,12 @@ export declare class DuetCard implements ThemeableComponent {
      * Icon to display on the left side of heading. Example: "form-location"
      */
     icon: DuetIconName;
+    /**
+     * Custom color to be used for the icon, as a design token entered in camelCase
+     * or kebab-case. Example: "color-primary". This property can also be set to
+     * "currentColor".
+     */
+    iconColor: DuetColor;
     /**
      * Image to display in the card. The image aspect ratio can be anything as
      * images are resized to fit 100% width of the card. Example:

package/lib/types/components/duet-chip/duet-chip.d.ts

@@ -86,6 +86,7 @@ export declare class DuetChip implements ThemeableComponent {
      * Not available for the input variation.
      */
     disabled: boolean;
+    removeDisabledAttributeWhenFalse(): void;
     /**
      * If the component expands or collapses adjacent content, then use this property
      * to add the aria-expanded attribute to the opening element. Set the value to convey

package/lib/types/components/duet-choice/duet-choice.d.ts

@@ -209,10 +209,6 @@ export declare class DuetChoice implements ThemeableComponent, InputComponent, A
      * Emitted when the component is available in the DOM.
      */
     duetChoiceReady: EventEmitter<CustomEvent>;
-    /**
-     * Emitted when the component is removed from the DOM.
-     */
-    duetChoiceRemove: EventEmitter<CustomEvent>;
     /**
      * Emitted when the checked property has changed.
      */
@@ -234,7 +230,7 @@ export declare class DuetChoice implements ThemeableComponent, InputComponent, A
     disconnectedCallback(): void;
     private radioInputListenersRemove;
     private radioInputListenersAdd;
-    private radioInputSetUp;
+    private inputSetUp;
     /**
      * Component event handling.
      */

package/lib/types/components/duet-choice-group/duet-choice-group.d.ts

@@ -7,7 +7,7 @@ export declare class DuetChoiceGroup implements ThemeableComponent {
     /**
      * Own Properties.
      */
-    private mutationO?;
+    private childObserver?;
     private choiceGroupName;
     private initialValue;
     private choices;
@@ -75,6 +75,7 @@ export declare class DuetChoiceGroup implements ThemeableComponent {
      * Determines, whether the control is disabled or not.
      */
     disabled: boolean;
+    removeDisabledAttributeWhenFalse(): void;
     /**
      * Sets whether making a choice is required or optional. Will set contained choices to required as well.
      */
@@ -86,6 +87,7 @@ export declare class DuetChoiceGroup implements ThemeableComponent {
      * unread by screen readers.
      */
     accessibleLiveError: "off" | "polite" | "assertive";
+    private childObserverCallback;
     /**
      * Component lifecycle events.
      */
@@ -97,7 +99,6 @@ export declare class DuetChoiceGroup implements ThemeableComponent {
      */
     private onSelect;
     private onChoiceReady;
-    private onChoiceRemove;
     private setInitialValue;
     /**
      * @internal

package/lib/types/components/duet-collapsible/duet-collapsible.d.ts

@@ -12,6 +12,7 @@ export type DuetCollapsibleToggleEvent = {
  * @part duet-collapsible-after-heading - piercing selector for styling the after heading
  * @part duet-collapsible-content - piercing selector for styling the content
  * @slot after-heading - Content after the heading can be for example badges.
+ * @slot heading - Instead of using heading property you can also use a native h1..h6 heading. Do not use a duet-heading here.
  */
 export declare class DuetCollapsible implements ThemeableComponent {
     /**
@@ -19,7 +20,8 @@ export declare class DuetCollapsible implements ThemeableComponent {
      */
     private nativeButton?;
     private id;
-    private hasAfterHeading?;
+    private hasAfterHeadingSlot?;
+    private hasHeadingSlot?;
     /**
      * Reference to host HTML element.
      */
@@ -42,6 +44,10 @@ export declare class DuetCollapsible implements ThemeableComponent {
      * The content for the collapsible heading.
      */
     heading: string;
+    /**
+     * The caption text to display below the heading.
+     */
+    caption: string;
     /**
      * Makes collapsible heading full width
      */
@@ -95,6 +101,7 @@ export declare class DuetCollapsible implements ThemeableComponent {
     private handleKeyDown;
     private getFontSizeFromTokens;
     private getEquivalentIconSize;
+    private getAccessibleLabel;
     private handleClick;
     /**
      * Sets focus on the specified `duet-collapsible`. Use this method instead of the global

package/lib/types/components/duet-combobox/duet-combobox.d.ts

@@ -22,6 +22,7 @@ export declare class DuetCombobox implements ThemeableComponent {
     private inputId;
     private activeDescendantId;
     private isAndroidDevice;
+    private isInsideModal;
     private resizeObserver;
     element: HTMLDivElement;
     processedItems: DuetComboboxItem[];

package/lib/types/components/duet-date-picker/duet-date-picker.d.ts

@@ -99,6 +99,10 @@ export declare class DuetDatePicker implements ThemeableComponent, InputComponen
      * Display the date picker input in error state along with an error message.
      */
     error: string;
+    /**
+     * Date picker offers built-in error messages for invalid or missing entries. These can be disabled if the application handles those.
+     */
+    disableBuiltInErrors: boolean;
     /**
      * Visually hide the label, but still show it to screen readers.
      */

package/lib/types/components/duet-fieldset/duet-fieldset.d.ts

@@ -12,6 +12,7 @@ export declare class DuetFieldset implements ThemeableComponent {
      */
     element: HTMLElement;
     hasTooltip: boolean;
+    lastItemIsChip: boolean;
     /**
      * Theme of the fieldset.
      */
@@ -58,8 +59,10 @@ export declare class DuetFieldset implements ThemeableComponent {
     /**
      * Component lifecycle events.
      */
+    connectedCallback(): void;
     componentWillLoad(): void;
     private checkHasTooltip;
+    private checkLastItem;
     /**
      * render() function
      * Always the last one in the class.

package/lib/types/components/duet-grid/duet-grid.d.ts

@@ -1,16 +1,14 @@
 import { ComponentInterface } from "../../stencil-public-runtime";
 import { DuetDirection, DuetGridBreakpoint } from "../../common-types";
-export type DuetGridAlignment = "top" | "bottom" | "center" | "stretch" | "baseline" | "form_distribute";
+export type DuetGridAlignment = "top" | "bottom" | "center" | "stretch" | "baseline" | "form-distribute" | "form_distribute";
 export type DuetGridDistribution = "default" | "left" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
 export type DuetGridMobileAlignment = "" | "auto" | "left" | "right" | "center";
 export declare class DuetGrid implements ComponentInterface {
     /**
      * Own Properties.
      */
-    private mutationO?;
-    private mutation1?;
-    private mql;
-    distributeFormElement: boolean;
+    private childObserver?;
+    private formDistributeObserver?;
     /**
      * Reference to host HTML element.
      */
@@ -36,11 +34,13 @@ export declare class DuetGrid implements ComponentInterface {
      */
     rowReverse: boolean;
     /**
-     * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
+     * Adjusts the vertical alignment of the grid items, if set to "form-distribute"
      * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
-     * so that they align even when displaying errors.
+     * so that they align even when displaying errors. Value "form_distribute" is deprecated, use
+     * "form-distribute" for new development.
      */
     alignment: DuetGridAlignment;
+    validateAlignment(newValue: string): void;
     /**
      * Adjusts the horizontal distribution of the grid items.
      */
@@ -62,6 +62,7 @@ export declare class DuetGrid implements ComponentInterface {
      * @returns {number}
      */
     private outerHeight;
+    private debounceWindowResizeHandler;
     /**
      * Component lifecycle events.
      */
@@ -70,6 +71,7 @@ export declare class DuetGrid implements ComponentInterface {
     /**
      * Local methods
      */
+    private getDirectChildren;
     private updateGridItems;
     private updateGridItemsWithInputFields;
     /**

package/lib/types/components/duet-heading/duet-heading.d.ts

@@ -49,6 +49,12 @@ export declare class DuetHeading implements ThemeableComponent {
      * Disable responsive font scaling.
      */
     fixedSize: boolean;
+    /**
+     * Adds aria-label for the heading. It is important to note that this overrides the heading's text content for
+     * screen readers. Usually the same content should be provided for all users. Use this attribute only in specisl
+     * circumstances when an accessibility specialist instructs to do so.
+     */
+    accessibleLabel: string;
     /**
      * Component lifecycle events.
      */

package/lib/types/components/duet-hero/duet-hero.d.ts

@@ -49,7 +49,9 @@ export declare class DuetHero implements ThemeableComponent {
     element: HTMLElement;
     private hasPreHeadingSlot;
     private hasHeadingSlot;
+    private hasHeadingSlotNative;
     private hasSubHeadingSlot;
+    private hasSubHeadingSlotNative;
     /**
      * State() variables
      * Inlined decorator, alphabetical order.
@@ -62,10 +64,9 @@ export declare class DuetHero implements ThemeableComponent {
      */
     theme: DuetTheme;
     /**
-     * @deprecated please use heading slot instead.
      * The heading of the hero area, rendered in an H1 tag. P.S. you can control
      * the level of the HTML heading by using “level” prop. If empty, heading
-     * will be hidden.
+     * will be hidden. There is also a heading slot that can be used.
      */
     heading: string;
     /**
@@ -219,6 +220,9 @@ export declare class DuetHero implements ThemeableComponent {
      */
     private refresh;
     private emitChange;
+    private getPreHeadingText;
+    private getHeadingText;
+    private getAccessibleHeading;
     /**
      * render() function
      * Always the last one in the class.

package/lib/types/components/duet-indicator/duet-indicator.d.ts

@@ -0,0 +1,17 @@
+export type IndicatorVariation = "new" | "change" | "error" | "success";
+export declare class DuetIndicator {
+    private defaultLabels;
+    element: HTMLElement;
+    /**
+     * The variation of the indicator. Typically "change" and "new" are used; "error" and "success" should be used
+     * only in special cases, as errors and succeses normally require a more prominent message.
+     */
+    variation: IndicatorVariation;
+    /**
+     * Label for users of assistive technologies. This component has sensible defaults, but they can be replaced with this
+     * property.
+     */
+    accessibleLabel: string;
+    private getAccessibleLabel;
+    render(): any;
+}

package/lib/types/components/duet-input/duet-input.d.ts

@@ -7,8 +7,8 @@ export type DuetInputEvent = {
     component: "duet-input";
 };
 export type DuetInputType = "text" | "email" | "password" | "search" | "tel" | "time";
-export type DuetInputComponentType = "input" | "number" | "date";
-export type DuetVariationType = "default" | "button" | "revealable";
+export type DuetInputComponentType = "input" | "number" | "date" | "phone";
+export type DuetVariationType = "default" | "button" | "button-left" | "revealable";
 /**
  * @slot tooltip - Use to place a tooltip alongside the label.
  */
@@ -161,12 +161,12 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
      */
     type: DuetInputType;
     /**
-     * Variation of button. Use "button" to render a button element next to the input. Use "revealable" to render a button that reveals the password.
+     * Variation of button. Use "button" to render a button element next to the input, "button-left" to render a button on
+     * the left edge of the input, and "revealable" to render a button that reveals the password.
      */
     variation: DuetVariationType;
     /**
-     * @internal
-     * Render a container for chips
+     * Render a container into which Duet Chip components can be added with the method "addChip".
      */
     chips: boolean;
     /**
@@ -204,12 +204,10 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
     pattern: string;
     /**
      * Use maxlength to specify the maximum length of the value that can be entered.
-     * Please note that this uses native HTML5 pattern validation.
      */
     maxlength: number;
     /**
      * Use minlength to specify the minimum length of the value that can be entered.
-     * Please note that this uses native HTML5 pattern validation.
      */
     minlength: number;
     /**
@@ -245,6 +243,10 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
      */
     value: string;
     protected valueChanged(): void;
+    /**
+     * This is a proxy for the enclosed native inputs validity
+     */
+    get validity(): ValidityState;
     /**
      * Tooltip to display next to the label of the input.
      */
@@ -333,26 +335,22 @@ export declare class DuetInput implements ThemeableComponent, InputComponent, A1
      */
     private selectChipToRight;
     /**
-     * @internal
-     * Add a chip to the input
+     * Add a chip to the input. Property "chips" must be true.
      */
     addChip(chip: HTMLDuetChipElement): Promise<void>;
     /**
-     * @internal
-     * Does the input have a chip with the given value and text
+     * Does the input have a chip with the given value and text.
      */
     hasChip({ value, text }: {
         value: string;
         text: string;
     }): Promise<boolean>;
     /**
-     * @internal
-     * Get all chips from the input
+     * Get all chips from the input.
      */
     getChips(): Promise<HTMLDuetChipElement[]>;
     /**
-     * @internal
-     * Remove all chips from the input
+     * Remove all chips from the input.
      */
     clearChips(): Promise<void>;
     /**

package/lib/types/components/duet-link/duet-link.d.ts

@@ -8,10 +8,8 @@ import { DuetLangObject } from "../../utils/language-utils";
  */
 export declare class DuetLink implements ThemeableComponent {
     private nativeLink;
-    private mediaQuerySmall;
-    private mediaQueryMedium;
     private resolvedDownload;
-    private screenTestBound;
+    private mutationObserver;
     element: HTMLElement;
     /**
      * Style variation of the link.
@@ -116,8 +114,8 @@ export declare class DuetLink implements ThemeableComponent {
     /**
      * Stores the
      */
-    isSmallScreen: boolean;
     isMediumScreen: boolean;
+    ariaLabel: string;
     /**
      * Component lifecycle events.
      */
@@ -129,9 +127,7 @@ export declare class DuetLink implements ThemeableComponent {
      * `link.focus()`.
      */
     setFocus(options?: FocusOptions): Promise<void>;
-    private initMediaQuery;
-    private destroyMediaQuery;
-    private screenTest;
+    private setAriaLabel;
     private resolveDownload;
     private renderDefaultContent;
     private renderBlockContent;

package/lib/types/components/duet-list-item/duet-list-item.d.ts

@@ -1,10 +1,16 @@
-import { ComponentInterface } from "../../stencil-public-runtime";
-import { DuetListBreakpoint } from "../../common-types";
+import { ThemeableComponent } from "../../common";
+import { DuetListBreakpoint, DuetTheme } from "../../common-types";
 /**
  * @slot label - The list item component’s label content. Use this to put content into description list’s dt element.
  * @slot value - The list item component’s value content. Use this to put content into description list’s dd element.
  */
-export declare class DuetListItem implements ComponentInterface {
+export declare class DuetListItem implements ThemeableComponent {
+    element: HTMLElement;
+    componentWillLoad(): void;
+    /**
+     * Theme.
+     */
+    theme: DuetTheme;
     /**
      * @internal
      * Enable or disable the automatic responsive behaviour of the list item.

package/lib/types/components/duet-logo/duet-logo.d.ts

@@ -8,6 +8,8 @@ export declare class DuetLogo implements ThemeableComponent {
      */
     private logoId;
     private nativeLink?;
+    private classMutationObserver;
+    isTurva2: boolean;
     /**
      * Reference to host HTML element.
      */
@@ -46,6 +48,12 @@ export declare class DuetLogo implements ThemeableComponent {
      * @default "fi"
      */
     language: DuetLanguage;
+    private setTurva2State;
+    /**
+     * @internal
+     * Renders only the symbol
+     */
+    onlySymbol: boolean;
     /**
      * Component lifecycle events.
      */

package/lib/types/components/duet-menu-bar/duet-menu-bar.d.ts

@@ -18,8 +18,6 @@ export declare class DuetMenuBar implements ThemeableComponent {
     /**
      * Own Properties.
      */
-    private mql;
-    private boundMqlFunctions;
     private container;
     private resizeTimer;
     private zindexTimer;
@@ -30,6 +28,7 @@ export declare class DuetMenuBar implements ThemeableComponent {
     leftMoreVisible: boolean;
     rightMoreVisible: boolean;
     centerSlotUsed: boolean;
+    mediaQueryMediumMatches: boolean;
     /**
      * Reference to host HTML element.
      */
@@ -57,6 +56,10 @@ export declare class DuetMenuBar implements ThemeableComponent {
      * Logo link accessible label.
      */
     logoLinkAccessibleLabel: string;
+    /**
+     * Additional information text to show next to the logo. Show only when the center slot is empty.
+     */
+    logoInfoText: string;
     /**
      * Adds accessible label for the button that is only shown for screen readers.
      * Typically, this label text replaces the visible text on the button for
@@ -83,7 +86,6 @@ export declare class DuetMenuBar implements ThemeableComponent {
      */
     componentWillLoad(): void;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     componentDidLoad(): void;
     onWindowResize(): void;
     private scrollbarCheck;
@@ -92,7 +94,6 @@ export declare class DuetMenuBar implements ThemeableComponent {
      * Checks inside the component whether the center slot is used.
      */
     private checkCenterSlot;
-    private changeLogoSize;
     private handleLogoClick;
     /**
      * render() function

package/lib/types/components/duet-modal/duet-modal.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { A11yComponent, ThemeableComponent } from "../../common";
+import { A11yComponent, FocusableComponent, ThemeableComponent } from "../../common";
 import { DuetColor, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetTheme, DuetVisualHeadingLevel } from "../../common-types";
 export type DuetModalSize = "small" | "medium" | "large";
 export type DuetModalVariation = "default" | "slide-up" | "loader";
@@ -132,6 +132,18 @@ export declare class DuetModal implements ThemeableComponent, A11yComponent {
      * Use this property when you want the modal to close when clicked outside of modal.
      */
     closeOnBlur: boolean;
+    /**
+     * Where to move focus when the modal is closed, either set the element dirctly with JS or give the id of the
+     * element as a string. Use empty string to disable focus moving on close - do this if after closing there is
+     * another element that automatically gets the focus or you handle focusing manually.
+     */
+    focusElementOnClose: FocusableComponent | HTMLElement | string;
+    /**
+     * Makes either the entire modal ("all"), headign and body content ("heading"), or just its body content ("body")
+     * an aria-live region, so that changes are announced by the screen readers. Do not use with loader variation,
+     * as it handles aria-live separately.
+     */
+    accessibleAnnounceChanges: "all" | "heading" | "body";
     /**
      * Emitted when the modal is opened.
      */
@@ -170,6 +182,10 @@ export declare class DuetModal implements ThemeableComponent, A11yComponent {
      * that triggered the modal (if we’re still in the same view).
      */
     hide(): Promise<void>;
+    /**
+     * Set focus on the close button of the modal.
+     */
+    focusCloseButton(): Promise<void>;
     /**
      * Scolls the top of the modal's content into view
      *