@db-ux/ngx-core-components 1.0.0-test-13b991d

package/README.md

@@ -0,0 +1,130 @@
+# @db-ux/ngx-core-components
+
+![Apache 2.0 license badge](https://img.shields.io/badge/License-Apache_2.0-blue.svg)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://makeapullrequest.com)
+
+An Angular library containing all styles & components of [DB UX Design System (technical components)](https://github.com/db-ux-design-system/core-web).
+
+> **Note:** Find more information about specific components [here](https://db-ux-design-system.github.io/core-web/review/main)
+
+## Install
+
+```shell
+npm i @db-ux/ngx-core-components
+```
+
+> **Note:** This will install [`@db-ux/core-foundations`](https://www.npmjs.com/package/@db-ux/core-foundations) and [`@db-ux/core-components`](https://www.npmjs.com/package/@db-ux/core-components) as well which contains the `css`/`scss` files
+
+## Styling Dependencies
+
+Import the styles in `scss` or `css`. Based on your technology the file names could be different.
+
+-   Default (relative): points to `../assets`
+-   Rollup (rollup): points to `@db-ux/core-foundations/assets`
+-   Webpack (webpack): points to `~@db-ux/core-foundations/assets`
+
+<details>
+  <summary><strong>SCSS</strong></summary>
+
+```scss styles.scss
+// styles.scss
+@forward "@db-ux/core-components/build/styles/rollup";
+```
+
+</details>
+<details>
+  <summary><strong>CSS</strong></summary>
+
+```css styles.css
+/* styles.css */
+@import "@db-ux/core-components/build/styles/rollup.css";
+```
+
+</details>
+
+> **Note:** The `relative` file contains optional and all components styles. If you consider performance issues see [@db-ux/core-components](https://www.npmjs.com/package/@db-ux/core-components) for more information.
+
+### Resolve assets
+
+The current default development config in `angular.json` doesn't use output hashing. This may cause an issue loading the fonts. Look at [this](https://github.com/angular/angular-cli/issues/26347) for more information.
+
+As a solution add `
+"outputHashing": "media"` to `configurations/development` in`angular.json`.
+
+## Usage
+
+```ts app.component.ts
+//app.component.ts
+import { DBButton } from '@db-ux/ngx-core-components';
+
+@Component({
+	// ...
+	imports: [
+		// ...,
+		DBButton
+    ],
+	standalone: true
+	// ...
+})
+```
+
+```html app.component.html
+<!-- app.component.html -->
+<db-button variant="brand">Button</db-button>
+```
+
+### Events
+
+There are 3 ways to use Events in Angular:
+
+**[ngModel](https://angular.io/api/forms/NgModel)**
+
+```html
+<db-input
+	label="Inputfield"
+	name="input-name"
+	[(ngModel)]="inputModel"
+></db-input>
+```
+
+**[FormControl](https://angular.io/api/forms/FormControl)**
+
+```html
+<db-input
+	label="Inputfield"
+	name="input-name"
+	[formControl]="inputControl"
+></db-input>
+```
+
+**[change](https://developer.mozilla.org/de/docs/Web/API/HTMLElement/change_event)**
+
+```html
+<db-input
+	label="Inputfield"
+	name="input-name"
+	(change)="inputModel = $event.target.value"
+></db-input>
+```
+
+## Deutsche Bahn brand
+
+As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UX Design System products free to use and release it under the Apache 2.0 license.
+Please have a look at our brand portal at <https://marketingportal.extranet.deutschebahn.com/> for any further questions and whom to contact on any brand issues.
+
+You must remove or replace any Deutsche Bahn brand and design assets as well as protected characteristics and trademarks. We're even also planning to provide a neutral theme that would make it much easier for you to use our product without the trademarks by Deutsche Bahn.
+
+## Contributions
+
+Contributions are very welcome, please refer to the [contribution guide](https://github.com/db-ux-design-system/core-web/blob/main/CONTRIBUTING.md).
+
+## Code of conduct
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone – have a look at our [Contributor Covenant Code of Conduct](https://github.com/db-ux-design-system/core-web/blob/main/CODE-OF-CONDUCT.md).
+
+## License
+
+This project is licensed under [Apache-2.0](LICENSE).

package/components/accordion/accordion.d.ts

@@ -0,0 +1,31 @@
+import { ElementRef, SimpleChanges } from "@angular/core";
+import { DBAccordionProps, DBAccordionState } from "./model";
+import * as i0 from "@angular/core";
+export declare class DBAccordion {
+    cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    id: DBAccordionProps["id"];
+    name: DBAccordionProps["name"];
+    behavior: DBAccordionProps["behavior"];
+    initOpenIndex: DBAccordionProps["initOpenIndex"];
+    className: DBAccordionProps["className"];
+    variant: DBAccordionProps["variant"];
+    items: DBAccordionProps["items"];
+    _ref: ElementRef | undefined;
+    _id: DBAccordionState["_id"];
+    _name: DBAccordionState["_name"];
+    initialized: DBAccordionState["initialized"];
+    _initOpenIndexDone: DBAccordionState["_initOpenIndexDone"];
+    convertItems(items: unknown[] | string | undefined): ReturnType<DBAccordionState["convertItems"]>;
+    trackByItem0(index: any, item: any): string;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngAfterContentChecked(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBAccordion, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBAccordion, "db-accordion", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "behavior": { "alias": "behavior"; "required": false; }; "initOpenIndex": { "alias": "initOpenIndex"; "required": false; }; "className": { "alias": "className"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/components/accordion/index.d.ts

@@ -0,0 +1 @@
+export { DBAccordion } from './accordion';

package/components/accordion/model.d.ts

@@ -0,0 +1,41 @@
+import { GlobalProps, GlobalState, InitializedState } from '../../shared/model';
+import { DBAccordionItemDefaultProps } from '../accordion-item/model';
+export declare const AccordionVariantList: readonly ["divider", "card"];
+export type AccordionVariantType = (typeof AccordionVariantList)[number];
+export declare const AccordionBehaviorList: readonly ["multiple", "single"];
+export type AccordionBehaviorType = (typeof AccordionBehaviorList)[number];
+export type DBAccordionDefaultProps = {
+    /**
+     * To allow multiple items open at the same time or only 1 item
+     */
+    behavior?: AccordionBehaviorType;
+    /**
+     * The index of items which should be open when loading the accordion
+     */
+    initOpenIndex?: number[];
+    /**
+     * Alternative to pass in a simple representation of accordion items
+     */
+    items?: DBAccordionItemDefaultProps[] | string;
+    /**
+     * Set details name for exclusive accordions, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#name
+     */
+    name?: string;
+    /**
+     * Informs about the changes in the internal state, which item is open
+     */
+    onChange?: (openAccordionItemIds: string[]) => void;
+    /**
+     * Defines the display of the accordion and the items:
+     * "divider": with a dividing line between the items
+     * "card": w/o dividing line, but items are shown in the card variant
+     */
+    variant?: AccordionVariantType;
+};
+export type DBAccordionProps = DBAccordionDefaultProps & GlobalProps;
+export type DBAccordionDefaultState = {
+    _initOpenIndexDone: boolean;
+    _name: string;
+    convertItems: (items?: unknown[] | string) => DBAccordionItemDefaultProps[];
+};
+export type DBAccordionState = DBAccordionDefaultState & GlobalState & InitializedState;

package/components/accordion-item/accordion-item.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter, ElementRef } from "@angular/core";
+import { DBAccordionItemProps, DBAccordionItemState } from "./model";
+import { ClickEvent } from "../../shared/model";
+import * as i0 from "@angular/core";
+export declare class DBAccordionItem {
+    cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    getBooleanAsString: (originBool?: boolean | undefined) => any;
+    id: DBAccordionItemProps["id"];
+    defaultOpen: DBAccordionItemProps["defaultOpen"];
+    className: DBAccordionItemProps["className"];
+    disabled: DBAccordionItemProps["disabled"];
+    headlinePlain: DBAccordionItemProps["headlinePlain"];
+    text: DBAccordionItemProps["text"];
+    onToggle: EventEmitter<any>;
+    _ref: ElementRef | undefined;
+    _id: DBAccordionItemState["_id"];
+    _open: DBAccordionItemState["_open"];
+    toggle(event: ClickEvent<HTMLElement>): ReturnType<DBAccordionItemState["toggle"]>;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBAccordionItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBAccordionItem, "db-accordion-item", never, { "id": { "alias": "id"; "required": false; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; }; "className": { "alias": "className"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "headlinePlain": { "alias": "headlinePlain"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, { "onToggle": "onToggle"; }, never, ["[headline]", "*"], true, never>;
+}

package/components/accordion-item/index.d.ts

@@ -0,0 +1 @@
+export { DBAccordionItem } from './accordion-item';

package/components/accordion-item/model.d.ts

@@ -0,0 +1,24 @@
+import { GlobalProps, GlobalState, TextProps, ToggleEventProps, ToggleEventState } from '../../shared/model';
+export type DBAccordionItemDefaultProps = {
+    /**
+     * Initial state for the accordion item
+     */
+    defaultOpen?: boolean;
+    /**
+     * The disabled attribute can be set to keep a user from clicking on the element.
+     */
+    disabled?: boolean;
+    /**
+     * Title of the accordion-item as slot
+     */
+    headline?: any;
+    /**
+     * Title of the accordion-item as plain text
+     */
+    headlinePlain?: string;
+} & TextProps;
+export type DBAccordionItemProps = DBAccordionItemDefaultProps & GlobalProps & ToggleEventProps;
+export type DBAccordionItemDefaultState = {
+    _open: boolean;
+};
+export type DBAccordionItemState = DBAccordionItemDefaultState & GlobalState & ToggleEventState<HTMLElement>;

package/components/badge/badge.d.ts

@@ -0,0 +1,28 @@
+import { ElementRef, SimpleChanges } from "@angular/core";
+import { DBBadgeProps, DBBadgeState } from "./model";
+import * as i0 from "@angular/core";
+export declare class DBBadge {
+    cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    DEFAULT_LABEL: string;
+    placement: DBBadgeProps["placement"];
+    id: DBBadgeProps["id"];
+    className: DBBadgeProps["className"];
+    semantic: DBBadgeProps["semantic"];
+    size: DBBadgeProps["size"];
+    emphasis: DBBadgeProps["emphasis"];
+    label: DBBadgeProps["label"];
+    text: DBBadgeProps["text"];
+    _ref: ElementRef | undefined;
+    initialized: DBBadgeState["initialized"];
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngAfterContentChecked(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBBadge, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBBadge, "db-badge", never, { "placement": { "alias": "placement"; "required": false; }; "id": { "alias": "id"; "required": false; }; "className": { "alias": "className"; "required": false; }; "semantic": { "alias": "semantic"; "required": false; }; "size": { "alias": "size"; "required": false; }; "emphasis": { "alias": "emphasis"; "required": false; }; "label": { "alias": "label"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/components/badge/index.d.ts

@@ -0,0 +1 @@
+export { DBBadge } from './badge';

package/components/badge/model.d.ts

@@ -0,0 +1,16 @@
+import { GlobalProps, GlobalState, InitializedState, SemanticProps, SizeProps, TagEmphasisProps, TextProps } from '../../shared/model';
+export declare const BadgePlacementList: readonly ["inline", "corner-top-left", "corner-top-right", "corner-center-left", "corner-center-right", "corner-bottom-left", "corner-bottom-right"];
+export type BadgePlacementType = (typeof BadgePlacementList)[number];
+export type DBBadgeDefaultProps = {
+    /**
+     * The `placement` attributes `corner-*` values change the position to absolute and adds a transform based on the placement.
+     */
+    placement?: BadgePlacementType;
+    /**
+     * Describes the badge for a11y if you use placement attribute with `corner-*`
+     */
+    label?: string;
+};
+export type DBBadgeProps = DBBadgeDefaultProps & GlobalProps & SemanticProps & SizeProps & TagEmphasisProps & TextProps;
+export type DBBadgeDefaultState = {};
+export type DBBadgeState = DBBadgeDefaultState & GlobalState & InitializedState;

package/components/brand/brand.d.ts

@@ -0,0 +1,24 @@
+import { ElementRef } from "@angular/core";
+import { DBBrandProps } from "./model";
+import * as i0 from "@angular/core";
+export declare class DBBrand {
+    cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    getHideProp: (show?: boolean | undefined) => any;
+    DEFAULT_ICON: string;
+    hideLogo: DBBrandProps["hideLogo"];
+    icon: DBBrandProps["icon"];
+    showIcon: DBBrandProps["showIcon"];
+    id: DBBrandProps["id"];
+    className: DBBrandProps["className"];
+    text: DBBrandProps["text"];
+    _ref: ElementRef | undefined;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBBrand, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBBrand, "db-brand", never, { "hideLogo": { "alias": "hideLogo"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "id": { "alias": "id"; "required": false; }; "className": { "alias": "className"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/components/brand/index.d.ts

@@ -0,0 +1 @@
+export { DBBrand } from './brand';

package/components/brand/model.d.ts

@@ -0,0 +1,10 @@
+import { GlobalProps, GlobalState, IconProps, ShowIconProps, TextProps } from '../../shared/model';
+export type DBBrandDefaultProps = {
+    /**
+     * @deprecated: Disable the default logo svg to pass in a custom `img`
+     */
+    hideLogo?: boolean;
+};
+export type DBBrandProps = DBBrandDefaultProps & GlobalProps & IconProps & ShowIconProps & TextProps;
+export type DBBrandDefaultState = {};
+export type DBBrandState = DBBrandDefaultState & GlobalState;

package/components/button/button.d.ts

@@ -0,0 +1,39 @@
+import { EventEmitter, ElementRef } from "@angular/core";
+import type { DBButtonProps, DBButtonState } from "./model";
+import { ClickEvent } from "../../shared/model";
+import * as i0 from "@angular/core";
+export declare class DBButton {
+    cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    getBooleanAsString: (originBool?: boolean | undefined) => any;
+    getHideProp: (show?: boolean | undefined) => any;
+    id: DBButtonProps["id"];
+    className: DBButtonProps["className"];
+    type: DBButtonProps["type"];
+    disabled: DBButtonProps["disabled"];
+    label: DBButtonProps["label"];
+    icon: DBButtonProps["icon"];
+    showIcon: DBButtonProps["showIcon"];
+    size: DBButtonProps["size"];
+    state: DBButtonProps["state"];
+    width: DBButtonProps["width"];
+    variant: DBButtonProps["variant"];
+    noText: DBButtonProps["noText"];
+    name: DBButtonProps["name"];
+    value: DBButtonProps["value"];
+    describedbyid: DBButtonProps["describedbyid"];
+    ariaexpanded: DBButtonProps["ariaexpanded"];
+    ariapressed: DBButtonProps["ariapressed"];
+    text: DBButtonProps["text"];
+    onClick: EventEmitter<any>;
+    _ref: ElementRef | undefined;
+    handleClick(event: ClickEvent<HTMLButtonElement>): ReturnType<DBButtonState["handleClick"]>;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBButton, "db-button", never, { "id": { "alias": "id"; "required": false; }; "className": { "alias": "className"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "size": { "alias": "size"; "required": false; }; "state": { "alias": "state"; "required": false; }; "width": { "alias": "width"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "noText": { "alias": "noText"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "describedbyid": { "alias": "describedbyid"; "required": false; }; "ariaexpanded": { "alias": "ariaexpanded"; "required": false; }; "ariapressed": { "alias": "ariapressed"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
+}

package/components/button/index.d.ts

@@ -0,0 +1 @@
+export { DBButton } from './button';

package/components/button/model.d.ts

@@ -0,0 +1,52 @@
+import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, IconProps, ShowIconProps, SizeProps, TextProps, WidthProps } from '../../shared/model';
+export declare const ButtonVariantList: readonly ["outlined", "brand", "filled", "ghost"];
+export type ButtonVariantType = (typeof ButtonVariantList)[number];
+export declare const ButtonTypeList: readonly ["button", "reset", "submit"];
+export type ButtonTypeType = (typeof ButtonTypeList)[number];
+export declare const ButtonStateList: readonly ["loading"];
+export type ButtonStateType = (typeof ButtonStateList)[number];
+export type DBButtonDefaultProps = {
+    /**
+     * If the button controls a grouping of other elements, the ariaexpanded state [indicates whether the controlled grouping is currently expanded or collapsed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded).
+     */
+    ariaexpanded?: boolean;
+    /**
+     * Defines the button as a toggle button. The value of [ariapressed describes the state of the button](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed).
+     */
+    ariapressed?: boolean;
+    /**
+     * The disabled attribute can be set to [keep a user from clicking on the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).
+     */
+    disabled?: boolean;
+    /**
+     * Define the text next to the icon specified via the icon Property to get hidden.
+     */
+    noText?: boolean;
+    /**
+     * The label represents the [aria-label attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) value of the button
+     */
+    label?: string;
+    /**
+     * The name attribute specifies a [name attributes value](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#name) for the button.
+     */
+    name?: string;
+    /**
+     * The type attribute specifies the [type of button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type).
+     */
+    type?: ButtonTypeType;
+    /**
+     * The value attribute specifies an initial [value for the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value).
+     */
+    value?: string;
+    /**
+     * Show loading progress inside button.
+     */
+    state?: ButtonStateType;
+    /**
+     * Variant of the button. Use only 1 primary button on a page as CTA otherwise use one of the adaptive buttons.
+     */
+    variant?: ButtonVariantType | string;
+};
+export type DBButtonProps = DBButtonDefaultProps & GlobalProps & ClickEventProps<HTMLButtonElement> & IconProps & WidthProps & SizeProps & ShowIconProps & TextProps;
+export type DBButtonDefaultState = {};
+export type DBButtonState = DBButtonDefaultState & GlobalState & ClickEventState<HTMLButtonElement>;

package/components/card/card.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter, ElementRef } from "@angular/core";
+import type { DBCardProps, DBCardState } from "./model";
+import { ClickEvent } from "../../shared/model";
+import * as i0 from "@angular/core";
+export declare class DBCard {
+    cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    id: DBCardProps["id"];
+    className: DBCardProps["className"];
+    behavior: DBCardProps["behavior"];
+    elevationLevel: DBCardProps["elevationLevel"];
+    spacing: DBCardProps["spacing"];
+    onClick: EventEmitter<any>;
+    _ref: ElementRef | undefined;
+    handleClick(event: ClickEvent<HTMLElement>): ReturnType<DBCardState["handleClick"]>;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBCard, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBCard, "db-card", never, { "id": { "alias": "id"; "required": false; }; "className": { "alias": "className"; "required": false; }; "behavior": { "alias": "behavior"; "required": false; }; "elevationLevel": { "alias": "elevationLevel"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; }, { "onClick": "onClick"; }, never, ["*"], true, never>;
+}

package/components/card/index.d.ts

@@ -0,0 +1 @@
+export { DBCard } from './card';

package/components/card/model.d.ts

@@ -0,0 +1,18 @@
+import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, SpacingProps } from '../../shared/model';
+export declare const CardBehaviorList: readonly ["static", "interactive"];
+export type CardBehaviorType = (typeof CardBehaviorList)[number];
+export declare const CardElevationLevelList: readonly ["1", "2", "3"];
+export type CardElevationLevelType = (typeof CardElevationLevelList)[number];
+export type DBCardDefaultProps = {
+    /**
+     * Makes the card interactive
+     */
+    behavior?: CardBehaviorType;
+    /**
+     * Changes the elevation of the card which is equal to `basic-background-level`
+     */
+    elevationLevel?: CardElevationLevelType;
+};
+export type DBCardProps = DBCardDefaultProps & GlobalProps & ClickEventProps<HTMLElement> & SpacingProps;
+export type DBCardDefaultState = {};
+export type DBCardState = DBCardDefaultState & GlobalState & ClickEventState<HTMLElement>;

package/components/checkbox/checkbox.d.ts

@@ -0,0 +1,64 @@
+import { EventEmitter, ElementRef, SimpleChanges, Renderer2 } from "@angular/core";
+import { ControlValueAccessor } from '@angular/forms';
+import { DBCheckboxProps, DBCheckboxState } from "./model";
+import { ChangeEvent, InteractionEvent } from "../../shared/model";
+import * as i0 from "@angular/core";
+export declare class DBCheckbox implements ControlValueAccessor {
+    private renderer;
+    constructor(renderer: Renderer2);
+    cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    getHideProp: (show?: boolean | undefined) => any;
+    stringPropVisible: (givenString?: string | undefined, showString?: boolean | undefined) => string | boolean | undefined;
+    DEFAULT_INVALID_MESSAGE: string;
+    DEFAULT_VALID_MESSAGE: string;
+    id: DBCheckboxProps["id"];
+    message: DBCheckboxProps["message"];
+    showMessage: DBCheckboxProps["showMessage"];
+    checked: DBCheckboxProps["checked"];
+    indeterminate: DBCheckboxProps["indeterminate"];
+    validation: DBCheckboxProps["validation"];
+    invalidMessage: DBCheckboxProps["invalidMessage"];
+    required: DBCheckboxProps["required"];
+    validMessage: DBCheckboxProps["validMessage"];
+    className: DBCheckboxProps["className"];
+    size: DBCheckboxProps["size"];
+    showLabel: DBCheckboxProps["showLabel"];
+    name: DBCheckboxProps["name"];
+    disabled: DBCheckboxProps["disabled"];
+    value: DBCheckboxProps["value"];
+    label: DBCheckboxProps["label"];
+    messageIcon: DBCheckboxProps["messageIcon"];
+    onChange: EventEmitter<any>;
+    change: EventEmitter<any>;
+    onBlur: EventEmitter<any>;
+    blur: EventEmitter<any>;
+    onFocus: EventEmitter<any>;
+    focus: EventEmitter<any>;
+    _ref: ElementRef | undefined;
+    initialized: DBCheckboxState["initialized"];
+    _id: DBCheckboxState["_id"];
+    _messageId: DBCheckboxState["_messageId"];
+    _validMessageId: DBCheckboxState["_validMessageId"];
+    _invalidMessageId: DBCheckboxState["_invalidMessageId"];
+    _descByIds: DBCheckboxState["_descByIds"];
+    _voiceOverFallback: DBCheckboxState["_voiceOverFallback"];
+    handleChange(event: ChangeEvent<HTMLInputElement>): ReturnType<DBCheckboxState["handleChange"]>;
+    handleBlur(event: InteractionEvent<HTMLInputElement>): ReturnType<DBCheckboxState["handleBlur"]>;
+    handleFocus(event: InteractionEvent<HTMLInputElement>): ReturnType<DBCheckboxState["handleFocus"]>;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    writeValue(value: any): void;
+    propagateChange(_: any): void;
+    registerOnChange(onChange: any): void;
+    registerOnTouched(onTouched: any): void;
+    setDisabledState(disabled: boolean): void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngAfterContentChecked(changes: SimpleChanges): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBCheckbox, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBCheckbox, "db-checkbox", never, { "id": { "alias": "id"; "required": false; }; "message": { "alias": "message"; "required": false; }; "showMessage": { "alias": "showMessage"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "validation": { "alias": "validation"; "required": false; }; "invalidMessage": { "alias": "invalidMessage"; "required": false; }; "required": { "alias": "required"; "required": false; }; "validMessage": { "alias": "validMessage"; "required": false; }; "className": { "alias": "className"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showLabel": { "alias": "showLabel"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "label": { "alias": "label"; "required": false; }; "messageIcon": { "alias": "messageIcon"; "required": false; }; }, { "onChange": "onChange"; "change": "change"; "onBlur": "onBlur"; "blur": "blur"; "onFocus": "onFocus"; "focus": "focus"; }, never, ["*"], true, never>;
+}

package/components/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { DBCheckbox } from './checkbox';

package/components/checkbox/model.d.ts

@@ -0,0 +1,10 @@
+import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormCheckProps, FormMessageProps, FormProps, FormState, GlobalProps, GlobalState, InitializedState, SizeProps } from '../../shared/model';
+export type DBCheckboxDefaultProps = {
+    /**
+     * Define an [indeterminate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#indeterminate) state of a checkbox
+     */
+    indeterminate?: boolean;
+};
+export type DBCheckboxProps = DBCheckboxDefaultProps & GlobalProps & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & FormCheckProps & FormMessageProps & SizeProps;
+export type DBCheckboxDefaultState = {};
+export type DBCheckboxState = DBCheckboxDefaultState & GlobalState & ChangeEventState<HTMLInputElement> & FocusEventState<HTMLInputElement> & FormState & InitializedState;

package/components/divider/divider.d.ts

@@ -0,0 +1,22 @@
+import { ElementRef } from "@angular/core";
+import { DBDividerProps } from "./model";
+import * as i0 from "@angular/core";
+export declare class DBDivider {
+    cls: (...args: import("../../utils").ClassNameArg[]) => string;
+    id: DBDividerProps["id"];
+    margin: DBDividerProps["margin"];
+    variant: DBDividerProps["variant"];
+    emphasis: DBDividerProps["emphasis"];
+    width: DBDividerProps["width"];
+    className: DBDividerProps["className"];
+    _ref: ElementRef | undefined;
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    private enableAttributePassing;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DBDivider, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DBDivider, "db-divider", never, { "id": { "alias": "id"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "emphasis": { "alias": "emphasis"; "required": false; }; "width": { "alias": "width"; "required": false; }; "className": { "alias": "className"; "required": false; }; }, {}, never, never, true, never>;
+}

package/components/divider/index.d.ts

@@ -0,0 +1 @@
+export { DBDivider } from './divider';

package/components/divider/model.d.ts

@@ -0,0 +1,18 @@
+import { EmphasisProps, GlobalProps, GlobalState, MarginProps, WidthProps } from '../../shared/model';
+export declare const DividerMarginList: readonly ["none", "_"];
+export type DividerMarginType = (typeof DividerMarginList)[number];
+export declare const DividerVariantList: readonly ["horizontal", "vertical"];
+export type DividerVariantType = (typeof DividerVariantList)[number];
+export type DBDividerDefaultProps = {
+    /**
+     * Removes the margin of the divider.
+     */
+    margin?: DividerMarginType;
+    /**
+     * Changes the orientation of the divider.
+     */
+    variant?: DividerVariantType;
+};
+export type DBDividerProps = DBDividerDefaultProps & GlobalProps & EmphasisProps & MarginProps & WidthProps;
+export type DBDividerDefaultState = {};
+export type DBDividerState = DBDividerDefaultState & GlobalState;