inviton-powerduck 0.0.69 → 0.0.71

package/components/counter/testall.tsx

@@ -48,162 +48,165 @@ import ModalSection from "../modal-wrap/modal-section";
 
 @Component
 class TestAllComponentsPageComponent extends PowerduckViewModelBase {
-    name: string = null; //Needs to have =null suffixed so that TS compiler takes it into account
-    boolValue: boolean = null;
-    selectedOptions: any = null;
-    timeViewType: string = "resourceTimeline";
-    timeEvents: TimegridCalendarEvent[] = [];
-    blockModal: boolean = false;
-    color: string = "#FF00FF";
-    numberVal: number = 1;
+	name: string = null; //Needs to have =null suffixed so that TS compiler takes it into account
+	boolValue: boolean = null;
+	selectedOptions: any = null;
+	timeViewType: string = "resourceTimeline";
+	timeEvents: TimegridCalendarEvent[] = [];
+	blockModal: boolean = false;
+	color: string = "#FF00FF";
+	numberVal: number = 1;
 
-    protected get breadcrumbItems(): BreadcrumbItem[] {
-        return [
-            {
-                text: "Home",
-                url: "/",
-                icon: "icon-direction",
-            },
-            {
-                text: "Hello world",
-                url: null,
-            },
-        ];
-    }
+	protected get breadcrumbItems(): BreadcrumbItem[] {
+		return [
+			{
+				text: "Home",
+				url: "/",
+				icon: "icon-direction",
+			},
+			{
+				text: "Hello world",
+				url: null,
+			},
+		];
+	}
 
-    protected get menuItems(): AppMenuItem[] {
-        return [];
-    }
+	protected get menuItems(): AppMenuItem[] {
+		return [];
+	}
 
-    mounted() {
-        window["_helloInstance"] = this;
-    }
+	mounted() {
+		window["_helloInstance"] = this;
+	}
 
-    getLineChartHeaderOptions(): CardHeaderDropdownArgs[] {
-        let retVal: CardHeaderDropdownArgs[] = [];
+	getLineChartHeaderOptions(): CardHeaderDropdownArgs[] {
+		let retVal: CardHeaderDropdownArgs[] = [];
 
-        retVal.push({
-            text: "Jedna moznosti",
-            icon: "fas fa-download",
-            clicked: () => alert("jedna"),
-        });
+		retVal.push({
+			text: "Jedna moznosti",
+			icon: "fas fa-download",
+			clicked: () => alert("jedna"),
+		});
 
-        retVal.push({
-            text: "Dva moznostka",
-            icon: "fas fa-sync-alt",
-            clicked: () => alert("dva"),
-        });
+		retVal.push({
+			text: "Dva moznostka",
+			icon: "fas fa-sync-alt",
+			clicked: () => alert("dva"),
+		});
 
-        return retVal;
-    }
+		return retVal;
+	}
 
-    getDummyDropdownOptions(): DropdownListOption[] {
-        return [
-            { id: "1", text: "Moznost 1" },
-            { id: "2", text: "Moznost 2" },
-        ];
-    }
+	getDummyDropdownOptions(): DropdownListOption[] {
+		return [
+			{ id: "1", text: "Moznost 1" },
+			{ id: "2", text: "Moznost 2" },
+		];
+	}
 
-    addTimeEvent(e: TimegridCalendarAddClickedArgs) {
-        let startTime = DateWrapper.getCurrent();
-        startTime.setDate(e.defaultDate.getDate());
-        startTime.setMonth(e.defaultDate.getMonth());
-        startTime.setFullYear(e.defaultDate.getFullYear());
-        startTime.setHours(e.defaultDate.getHours());
-        startTime.setMinutes(e.defaultDate.getMinutes());
+	addTimeEvent(e: TimegridCalendarAddClickedArgs) {
+		let startTime = DateWrapper.getCurrent();
+		startTime.setDate(e.defaultDate.getDate());
+		startTime.setMonth(e.defaultDate.getMonth());
+		startTime.setFullYear(e.defaultDate.getFullYear());
+		startTime.setHours(e.defaultDate.getHours());
+		startTime.setMinutes(e.defaultDate.getMinutes());
 
-        let endTime = DateWrapper.getCurrent();
-        endTime.setDate(e.defaultDate.getDate());
-        endTime.setMonth(e.defaultDate.getMonth());
-        endTime.setFullYear(e.defaultDate.getFullYear());
-        endTime.setHours(e.defaultDate.getHours() + 1);
-        endTime.setMinutes(e.defaultDate.getMinutes());
+		let endTime = DateWrapper.getCurrent();
+		endTime.setDate(e.defaultDate.getDate());
+		endTime.setMonth(e.defaultDate.getMonth());
+		endTime.setFullYear(e.defaultDate.getFullYear());
+		endTime.setHours(e.defaultDate.getHours() + 1);
+		endTime.setMinutes(e.defaultDate.getMinutes());
 
-        this.timeEvents.push({
-            id: "idd" + Math.random() * (999999999 - 1) + 1,
-            dataRow: { jedna: "sdfsd", druha: "sdfsdfsd" },
-            resourceId: e.resource != null ? e.resource.id : prompt("Room a or b?", "a"),
-            title: "Event cislo " + this.timeEvents.length + 1,
-            start: startTime,
-            end: endTime,
-        });
-    }
+		this.timeEvents.push({
+			id: "idd" + Math.random() * (999999999 - 1) + 1,
+			dataRow: { jedna: "sdfsd", druha: "sdfsdfsd" },
+			resourceId: e.resource != null ? e.resource.id : prompt("Room a or b?", "a"),
+			title: "Event cislo " + this.timeEvents.length + 1,
+			start: startTime,
+			end: endTime,
+		});
+	}
 
-    render(h) {
-        return (
-            <div>
-                <p>Hello world from the boilerplate</p>
-                <p>{`Your name is: ${this.name?.length > 0 ? this.name : "Not specified"}`}</p>
+	render(h) {
+		return (
+			<div>
+				<p>Hello world from the boilerplate</p>
+				<p>{`Your name is: ${this.name?.length > 0 ? this.name : "Not specified"}`}</p>
 
-                <TextBox
-                    label={"Your name"}
-                    value={this.name}
-                    changed={(e) => {
-                        this.name = e;
-                    }}
-                    subtitle={"Some additional info about the field"}
-                />
-                <TextBox
-                    label={"Your name append"}
-                    value={this.name}
-                    changed={(e) => {
-                        this.name = e;
-                    }}
-                    appendIcon={"fas fa-user"}
-                />
-                <TextBox
-                    label={"Your name prepend"}
-                    value={this.name}
-                    changed={(e) => {
-                        this.name = e;
-                    }}
-                    prependIcon={"fas fa-user"}
-                />
-                <TextBox
-                    label={"With error"}
-                    value={null}
-                    changed={(e) => { }}
-                    validationState={{
-                        errorMessage: "Unable to proceed, error...",
-                        mandatory: true,
-                        valid: false,
-                        validationDeclaration: null,
-                    }}
-                />
-                <CheckBox
-                    label={"Do you agree?"}
-                    checkboxLabelHtml={"Additional checkbox label"}
-                    value={this.boolValue}
-                    changed={(e) => {
-                        this.boolValue = e;
-                    }}
-                />
-                <ColorPicker
-                    label={"Pick a color"}
-                    value={this.color}
-                    changed={(e) => {
-                        this.color = e;
-                    }}
-                />
-                <DaterangePicker label={"Range picker"} value={null} changed={(e) => { }} />
-                <DatetimePicker label={"Pick a date"} value={null} showTime={true} changed={(e) => { }} />
-                <NumericInput
-                    label={"Spinner number input"}
-                    value={this.numberVal}
-                    changed={(e) => {
-                        this.numberVal = e;
-                    }}
-                />
-                <NumericInput
-                    label={"Native number input"}
-                    mode={NumericInputMode.Clasic}
-                    value={this.numberVal}
-                    changed={(e) => {
-                        this.numberVal = e;
-                    }}
-                />
-                <WysiwigEditor label={"WYSIWIG"} value={null} changed={(e) => { }} />
-                {/* <Tabs>
+				<TextBox
+					label={"Your name"}
+					value={this.name}
+					showClearValueButton={true}
+					changed={(e) => {
+						this.name = e;
+					}}
+					subtitle={"Some additional info about the field"}
+				/>
+				<TextBox
+					label={"Your name append"}
+					value={this.name}
+					showClearValueButton={true}
+					changed={(e) => {
+						this.name = e;
+					}}
+					appendIcon={"fas fa-user"}
+				/>
+				<TextBox
+					label={"Your name prepend"}
+					value={this.name}
+					showClearValueButton={true}
+					changed={(e) => {
+						this.name = e;
+					}}
+					prependIcon={"fas fa-user"}
+				/>
+				<TextBox
+					label={"With error"}
+					value={null}
+					changed={(e) => { }}
+					validationState={{
+						errorMessage: "Unable to proceed, error...",
+						mandatory: true,
+						valid: false,
+						validationDeclaration: null,
+					}}
+				/>
+				<CheckBox
+					label={"Do you agree?"}
+					checkboxLabelHtml={"Additional checkbox label"}
+					value={this.boolValue}
+					changed={(e) => {
+						this.boolValue = e;
+					}}
+				/>
+				<ColorPicker
+					label={"Pick a color"}
+					value={this.color}
+					changed={(e) => {
+						this.color = e;
+					}}
+				/>
+				<DaterangePicker label={"Range picker"} value={null} changed={(e) => { }} />
+				<DatetimePicker label={"Pick a date"} value={null} showTime={true} changed={(e) => { }} />
+				<NumericInput
+					label={"Spinner number input"}
+					value={this.numberVal}
+					changed={(e) => {
+						this.numberVal = e;
+					}}
+				/>
+				<NumericInput
+					label={"Native number input"}
+					mode={NumericInputMode.Clasic}
+					value={this.numberVal}
+					changed={(e) => {
+						this.numberVal = e;
+					}}
+				/>
+				<WysiwigEditor label={"WYSIWIG"} value={null} changed={(e) => { }} />
+				{/* <Tabs>
                     <TabPage icon={"icon icon-user"} navCaption={"User"}>
                         Tu je tab usera
                     </TabPage>
@@ -219,9 +222,9 @@ class TestAllComponentsPageComponent extends PowerduckViewModelBase {
                         Tu je tab settings
                     </TabPage>
                 </Tabs> */}
-                <br />
-                <br />
-                {/* <Tabs renderMode={TabsRenderMode.SidePillsExtended}>
+				<br />
+				<br />
+				{/* <Tabs renderMode={TabsRenderMode.SidePillsExtended}>
                     <TabPage icon={"icon icon-user"} navCaption={"User"}>
                         Tu je tab usera
                     </TabPage>
@@ -229,223 +232,223 @@ class TestAllComponentsPageComponent extends PowerduckViewModelBase {
                         Tu je tab settings
                     </TabPage>
                 </Tabs> */}
-                <br />
-                <br />
-                <BootstrapToggle
-                    label={"Toggle"}
-                    value={this.boolValue}
-                    changed={(e) => {
-                        this.boolValue = e;
-                    }}
-                />
+				<br />
+				<br />
+				<BootstrapToggle
+					label={"Toggle"}
+					value={this.boolValue}
+					changed={(e) => {
+						this.boolValue = e;
+					}}
+				/>
 
-                <BootstrapToggle
-                    label={"Toggle"}
-                    value={this.boolValue}
-                    size={BootstrapToggleSize.Small}
-                    changed={(e) => {
-                        this.boolValue = e;
-                    }}
-                />
-                <Button
-                    text={"Click me"}
-                    layout={ButtonLayout.Primary}
-                    disabled={true}
-                    icon={"icon icon-people"}
-                    iconButton={false}
-                    round={true}
-                    size={ButtonSize.Regular}
-                    tooltip={"Sample tooltip"}
-                    clicked={(e) => {
-                        alert("you clicked me");
-                    }}
-                />
-                <Button
-                    text={"Show sample modal"}
-                    layout={ButtonLayout.Secondary}
-                    clicked={(e) => {
-                        this.blockModal = true;
-                        (this.$refs.sampleModal as typeof Modal.prototype).show();
-                        setTimeout(() => {
-                            this.blockModal = false;
-                        }, 3000);
-                    }}
-                />
+				<BootstrapToggle
+					label={"Toggle"}
+					value={this.boolValue}
+					size={BootstrapToggleSize.Small}
+					changed={(e) => {
+						this.boolValue = e;
+					}}
+				/>
+				<Button
+					text={"Click me"}
+					layout={ButtonLayout.Primary}
+					disabled={true}
+					icon={"icon icon-people"}
+					iconButton={false}
+					round={true}
+					size={ButtonSize.Regular}
+					tooltip={"Sample tooltip"}
+					clicked={(e) => {
+						alert("you clicked me");
+					}}
+				/>
+				<Button
+					text={"Show sample modal"}
+					layout={ButtonLayout.Secondary}
+					clicked={(e) => {
+						this.blockModal = true;
+						(this.$refs.sampleModal as typeof Modal.prototype).show();
+						setTimeout(() => {
+							this.blockModal = false;
+						}, 3000);
+					}}
+				/>
 
 
-                <Button
-                    text={"Show sectionaed"}
-                    layout={ButtonLayout.Secondary}
-                    clicked={(e) => {
-                        this.blockModal = true;
-                        (this.$refs.sampleSectionedModal as typeof Modal.prototype).show();
-                        setTimeout(() => {
-                            this.blockModal = false;
-                        }, 3000);
-                    }}
-                />
-                <Modal size={ModalSize.Large} ref="sampleSectionedModal" title={"Sample modal"} blocked={this.blockModal}>
-                    <ModalBody>
-                        <ModalSectionWrapper ref={"modalSectionWrapper"}>
-                            <ModalSection icon="icon icon-settings" navCaption={"Settings1"}>
-                                <p>Some modal content1</p>
-                            </ModalSection>
-                            {this.boolValue == true &&
-                                <ModalSection icon="icon icon-settings" navCaption={"Settings2"}>
-                                    <p>Some modal content2</p>
-                                </ModalSection>
-                            }
+				<Button
+					text={"Show sectionaed"}
+					layout={ButtonLayout.Secondary}
+					clicked={(e) => {
+						this.blockModal = true;
+						(this.$refs.sampleSectionedModal as typeof Modal.prototype).show();
+						setTimeout(() => {
+							this.blockModal = false;
+						}, 3000);
+					}}
+				/>
+				<Modal size={ModalSize.Large} ref="sampleSectionedModal" title={"Sample modal"} blocked={this.blockModal}>
+					<ModalBody>
+						<ModalSectionWrapper ref={"modalSectionWrapper"}>
+							<ModalSection icon="icon icon-settings" navCaption={"Settings1"}>
+								<p>Some modal content1</p>
+							</ModalSection>
+							{this.boolValue == true &&
+								<ModalSection icon="icon icon-settings" navCaption={"Settings2"}>
+									<p>Some modal content2</p>
+								</ModalSection>
+							}
 
-                            <ModalSection icon="icon icon-settings" navCaption={"Settings4"}>
-                                <p>Some modal content4444</p>
-                            </ModalSection>
+							<ModalSection icon="icon icon-settings" navCaption={"Settings4"}>
+								<p>Some modal content4444</p>
+							</ModalSection>
 
-                            <ModalSection icon="icon icon-settings" navCaption={"Settings9"}>
-                                <p>Some modal content9999</p>
-                            </ModalSection>
+							<ModalSection icon="icon icon-settings" navCaption={"Settings9"}>
+								<p>Some modal content9999</p>
+							</ModalSection>
 
-                            <Button layout={ButtonLayout.Primary} text="OK" clicked={() => { }} />
-                        </ModalSectionWrapper>
-                    </ModalBody>
-                </Modal>
+							<Button layout={ButtonLayout.Primary} text="OK" clicked={() => { }} />
+						</ModalSectionWrapper>
+					</ModalBody>
+				</Modal>
 
 
-                <TextButton
-                    text="Click me for some news"
-                    icon={"icon icon-people"}
-                    clicked={(e) => {
-                        alert("you clicked me?");
-                    }}
-                />
-                <Card>
-                    <CardHeader title={"Vacsia titulka"} />
-                    <CardBody>jeden, dva</CardBody>
-                </Card>
-                <Card>
-                    <CardHeader smallTitle={"Graf vstupov"} />
-                    <CardBody>jeden, dva</CardBody>
-                </Card>
-                <br />
-                <br />
-                <Card renderMode={"inlined"}>
-                    <CardHeader title={"Inlajnova karta"} />
-                    <CardBody>jeden, dva</CardBody>
-                </Card>
-                <br />
-                <br />
-                <Card>
-                    <CardHeaderWithOptions smallTitle={"Graf vstupov"} dropdownOptions={this.getLineChartHeaderOptions()} />
-                    <CardBody>jeden, dva</CardBody>
-                </Card>
-                <DataTableStatic
-                    id={"tblTest"}
-                    topVisible={true}
-                    columns={[
-                        { id: "One", caption: "One" },
-                        { id: "Two", caption: "Two" },
-                        { id: "Three", caption: "Three" },
-                    ]}
-                    rows={[
-                        { One: "Row-1-1", Two: "Row-2-1", Three: "Row-3-1" },
-                        { One: "Row-1-2", Two: "Row-2-2", Three: "Row-3-2" },
-                        { One: "Row-1-3", Two: "Row-2-3", Three: "Row-3-3" },
-                    ]}
-                />
-                <DropdownList
-                    options={this.getDummyDropdownOptions()}
-                    selected={this.getDummyDropdownOptions().filter((p) => p.id == this.selectedOptions)[0]}
-                    label={"TODO: Upravit sablonou Vyber z dropdownu"}
-                    changed={(v) => {
-                        this.selectedOptions = v.id;
-                    }}
-                />
-                <DropdownButton layout={ButtonLayout.Default} size={ButtonSize.Regular} text={"Akcie"}>
-                    <DropdownButtonItem icon={"icon icon-settings"} text={'Edit'} clicked={() => alert("clicked me")} />
-                    <DropdownButtonSeparator />
-                    <DropdownButtonItem
-                        icon={"icon icon-notebook"}
-                        text={"History"}
-                        clicked={() => {
-                            alert("clicked history");
-                        }}
-                    />
-                    <DropdownButtonItem icon={"icon icon-trash"} text={"Delete"} clicked={() => confirm("You sure?")} />
-                </DropdownButton>
-                <br />
-                Flex NOT collapsing on mobile
-                <FlexContainer fullWidthOnMobile={false}>
-                    <FlexFormItem>Auto-wrap</FlexFormItem>
-                    <FlexFormItem>Auto-wrap</FlexFormItem>
-                    <FlexFormItem flexFill={false} width={100}>
-                        <div style="background-color:gray">100px</div>
-                    </FlexFormItem>
-                    <FlexFormItem flexFill={false} width={50}>
-                        <div style="background-color:gray">50px</div>
-                    </FlexFormItem>
-                </FlexContainer>
-                <br />
-                Flex collapsing on mobile
-                <FlexContainer fullWidthOnMobile={true}>
-                    <FlexFormItem>Auto-wrap</FlexFormItem>
-                    <FlexFormItem>Auto-wrap</FlexFormItem>
-                    <FlexFormItem flexFill={false} width={100}>
-                        <div style="background-color:gray">100px</div>
-                    </FlexFormItem>
-                    <FlexFormItem flexFill={false} width={50}>
-                        <div style="background-color:gray">50px</div>
-                    </FlexFormItem>
-                </FlexContainer>
-                <Fieldset caption={"Sample fields"}>Here is some inner content</Fieldset>
-                <FooterButtons>
-                    <Button clicked={(e) => alert("cancel")} layout={ButtonLayout.Default} icon="fas fa-times" text={'Cancel'} />
-                </FooterButtons>
-                <Separator text="Separujem.." />
-                <ValidationResultDisplayer
-                    validationState={{
-                        errorMessage: "Unable to proceed, error...",
-                        mandatory: true,
-                        valid: false,
-                        validationDeclaration: null,
-                    }}
-                />
-                <HtmlLiteral innerHTML={"Test of <b>HTML Literal</b>"} />
-                <UploadImageAndCropButton
-                    text={"Upload image and crop"}
-                    icon={"icon icon-people"}
-                    layout={ButtonLayout.Danger}
-                    uploadArgs={null}
-                    targetBlobContainer={"dummy"}
-                    uploadComplete={(e) => { }}
-                    uploadUrl={"dummy"}
-                />
-                <br />
-                <Accordion>
-                    <AccordionPage caption={"One"} badge={"0"}>
-                        <div>One</div>
-                    </AccordionPage>
-                    <AccordionPage caption={"Two"} badge={"3"} badgeStyle={"warning"}>
-                        <div>Two</div>
-                    </AccordionPage>
-                    <AccordionPage caption={"Three"} badge={"3"} badgeStyle={"danger"}>
-                        <div>Three</div>
-                    </AccordionPage>
-                </Accordion>
-                <br />
-                <div>
-                    <FullCalendarDraggableEvent
-                        title={"Event druhaov"}
-                        dataRow={{ druha: "jedna" }}
-                        startDate={new DateWrapper(1900, 1, 1, 10, 0, 0, 0)}
-                        endDate={new DateWrapper(1900, 1, 1, 10, 45, 0, 0)}
-                    />
-                    <FullCalendarDraggableEvent
-                        title={"Ej bardzo dva"}
-                        dataRow={{ druha: "kurva" }}
-                        startDate={new DateWrapper(1900, 1, 1, 10, 0, 0, 0)}
-                        endDate={new DateWrapper(1900, 1, 1, 11, 30, 0, 0)}
-                    />
-                </div>
-                {/* <TimegridCalendar
+				<TextButton
+					text="Click me for some news"
+					icon={"icon icon-people"}
+					clicked={(e) => {
+						alert("you clicked me?");
+					}}
+				/>
+				<Card>
+					<CardHeader title={"Vacsia titulka"} />
+					<CardBody>jeden, dva</CardBody>
+				</Card>
+				<Card>
+					<CardHeader smallTitle={"Graf vstupov"} />
+					<CardBody>jeden, dva</CardBody>
+				</Card>
+				<br />
+				<br />
+				<Card renderMode={"inlined"}>
+					<CardHeader title={"Inlajnova karta"} />
+					<CardBody>jeden, dva</CardBody>
+				</Card>
+				<br />
+				<br />
+				<Card>
+					<CardHeaderWithOptions smallTitle={"Graf vstupov"} dropdownOptions={this.getLineChartHeaderOptions()} />
+					<CardBody>jeden, dva</CardBody>
+				</Card>
+				<DataTableStatic
+					id={"tblTest"}
+					topVisible={true}
+					columns={[
+						{ id: "One", caption: "One" },
+						{ id: "Two", caption: "Two" },
+						{ id: "Three", caption: "Three" },
+					]}
+					rows={[
+						{ One: "Row-1-1", Two: "Row-2-1", Three: "Row-3-1" },
+						{ One: "Row-1-2", Two: "Row-2-2", Three: "Row-3-2" },
+						{ One: "Row-1-3", Two: "Row-2-3", Three: "Row-3-3" },
+					]}
+				/>
+				<DropdownList
+					options={this.getDummyDropdownOptions()}
+					selected={this.getDummyDropdownOptions().filter((p) => p.id == this.selectedOptions)[0]}
+					label={"TODO: Upravit sablonou Vyber z dropdownu"}
+					changed={(v) => {
+						this.selectedOptions = v.id;
+					}}
+				/>
+				<DropdownButton layout={ButtonLayout.Default} size={ButtonSize.Regular} text={"Akcie"}>
+					<DropdownButtonItem icon={"icon icon-settings"} text={'Edit'} clicked={() => alert("clicked me")} />
+					<DropdownButtonSeparator />
+					<DropdownButtonItem
+						icon={"icon icon-notebook"}
+						text={"History"}
+						clicked={() => {
+							alert("clicked history");
+						}}
+					/>
+					<DropdownButtonItem icon={"icon icon-trash"} text={"Delete"} clicked={() => confirm("You sure?")} />
+				</DropdownButton>
+				<br />
+				Flex NOT collapsing on mobile
+				<FlexContainer fullWidthOnMobile={false}>
+					<FlexFormItem>Auto-wrap</FlexFormItem>
+					<FlexFormItem>Auto-wrap</FlexFormItem>
+					<FlexFormItem flexFill={false} width={100}>
+						<div style="background-color:gray">100px</div>
+					</FlexFormItem>
+					<FlexFormItem flexFill={false} width={50}>
+						<div style="background-color:gray">50px</div>
+					</FlexFormItem>
+				</FlexContainer>
+				<br />
+				Flex collapsing on mobile
+				<FlexContainer fullWidthOnMobile={true}>
+					<FlexFormItem>Auto-wrap</FlexFormItem>
+					<FlexFormItem>Auto-wrap</FlexFormItem>
+					<FlexFormItem flexFill={false} width={100}>
+						<div style="background-color:gray">100px</div>
+					</FlexFormItem>
+					<FlexFormItem flexFill={false} width={50}>
+						<div style="background-color:gray">50px</div>
+					</FlexFormItem>
+				</FlexContainer>
+				<Fieldset caption={"Sample fields"}>Here is some inner content</Fieldset>
+				<FooterButtons>
+					<Button clicked={(e) => alert("cancel")} layout={ButtonLayout.Default} icon="fas fa-times" text={'Cancel'} />
+				</FooterButtons>
+				<Separator text="Separujem.." />
+				<ValidationResultDisplayer
+					validationState={{
+						errorMessage: "Unable to proceed, error...",
+						mandatory: true,
+						valid: false,
+						validationDeclaration: null,
+					}}
+				/>
+				<HtmlLiteral innerHTML={"Test of <b>HTML Literal</b>"} />
+				<UploadImageAndCropButton
+					text={"Upload image and crop"}
+					icon={"icon icon-people"}
+					layout={ButtonLayout.Danger}
+					uploadArgs={null}
+					targetBlobContainer={"dummy"}
+					uploadComplete={(e) => { }}
+					uploadUrl={"dummy"}
+				/>
+				<br />
+				<Accordion>
+					<AccordionPage caption={"One"} badge={"0"}>
+						<div>One</div>
+					</AccordionPage>
+					<AccordionPage caption={"Two"} badge={"3"} badgeStyle={"warning"}>
+						<div>Two</div>
+					</AccordionPage>
+					<AccordionPage caption={"Three"} badge={"3"} badgeStyle={"danger"}>
+						<div>Three</div>
+					</AccordionPage>
+				</Accordion>
+				<br />
+				<div>
+					<FullCalendarDraggableEvent
+						title={"Event druhaov"}
+						dataRow={{ druha: "jedna" }}
+						startDate={new DateWrapper(1900, 1, 1, 10, 0, 0, 0)}
+						endDate={new DateWrapper(1900, 1, 1, 10, 45, 0, 0)}
+					/>
+					<FullCalendarDraggableEvent
+						title={"Ej bardzo dva"}
+						dataRow={{ druha: "kurva" }}
+						startDate={new DateWrapper(1900, 1, 1, 10, 0, 0, 0)}
+						endDate={new DateWrapper(1900, 1, 1, 11, 30, 0, 0)}
+					/>
+				</div>
+				{/* <TimegridCalendar
                     minDate={new DateWrapper(2020, 2, 3)}
                     maxDate={new DateWrapper(2020, 2, 7, 10, 0, 0)}
                     viewType={this.timeViewType as any}
@@ -465,25 +468,25 @@ class TestAllComponentsPageComponent extends PowerduckViewModelBase {
                         }, 3000);
                     }}
                 /> */}
-                <br />
-                <Modal size={ModalSize.Normal} ref="sampleModal" title={"Sample modal"} blocked={this.blockModal}>
-                    <ModalBody>
-                        <p>Some modal content</p>
-                    </ModalBody>
-                    <ModalFooter>
-                        <Button layout={ButtonLayout.Default} dismissModal={true} text={'Close'} clicked={() => { }} />
-                        <Button
-                            layout={ButtonLayout.Primary}
-                            text="OK"
-                            clicked={() => {
-                                alert("OK clicked...now click close");
-                            }}
-                        />
-                    </ModalFooter>
-                </Modal>
-            </div>
-        );
-    }
+				<br />
+				<Modal size={ModalSize.Normal} ref="sampleModal" title={"Sample modal"} blocked={this.blockModal}>
+					<ModalBody>
+						<p>Some modal content</p>
+					</ModalBody>
+					<ModalFooter>
+						<Button layout={ButtonLayout.Default} dismissModal={true} text={'Close'} clicked={() => { }} />
+						<Button
+							layout={ButtonLayout.Primary}
+							text="OK"
+							clicked={() => {
+								alert("OK clicked...now click close");
+							}}
+						/>
+					</ModalFooter>
+				</Modal>
+			</div>
+		);
+	}
 }
 
 const TestAllComponentsPage = toNative(TestAllComponentsPageComponent)