whelk-ui 0.0.8 → 0.0.9

package/dist/index.d.ts

@@ -27,7 +27,11 @@ declare const __VLS_component: DefineComponent<ExtractPropTypes<{
 
 declare const __VLS_component_2: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
 
-declare const __VLS_component_3: DefineComponent<ExtractPropTypes<{
+declare const __VLS_component_3: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+
+declare const __VLS_component_4: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+
+declare const __VLS_component_5: DefineComponent<ExtractPropTypes<{
     dropDownItems: {
         type: PropType<DropDownItemsInterface[]>;
         required: true;
@@ -43,9 +47,9 @@ declare const __VLS_component_3: DefineComponent<ExtractPropTypes<{
     onDropDownItemClicked?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
 
-declare const __VLS_component_4: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const __VLS_component_6: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
 
-declare const __VLS_component_5: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLSpanElement>;
+declare const __VLS_component_7: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLSpanElement>;
 
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -84,6 +88,24 @@ declare function __VLS_template_4(): {
 };
 
 declare function __VLS_template_5(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_6(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_7(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
@@ -102,6 +124,10 @@ declare type __VLS_TemplateResult_4 = ReturnType<typeof __VLS_template_4>;
 
 declare type __VLS_TemplateResult_5 = ReturnType<typeof __VLS_template_5>;
 
+declare type __VLS_TemplateResult_6 = ReturnType<typeof __VLS_template_6>;
+
+declare type __VLS_TemplateResult_7 = ReturnType<typeof __VLS_template_7>;
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -132,10 +158,26 @@ declare type __VLS_WithTemplateSlots_5<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_6<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_7<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 export declare const ButtonComponent: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 
 export declare const CardComponent: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
 
+export declare const CardFooter: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
+
+export declare const CardHeader: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
+
 export declare const CheckBox: DefineComponent<ExtractPropTypes<{
     id: {
         type: StringConstructor;
@@ -233,7 +275,23 @@ export declare interface DocumentItemInterface {
     type: string;
 }
 
-export declare const DropDown: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
+export declare const DropDown: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
+
+export declare const DropDownItem: DefineComponent<ExtractPropTypes<{
+    dropDownItems: {
+        type: PropType<DropDownItemsInterface[]>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    dropDownItemClicked: (...args: any[]) => void;
+}, string, PublicProps, Readonly< ExtractPropTypes<{
+    dropDownItems: {
+        type: PropType<DropDownItemsInterface[]>;
+        required: true;
+    };
+}>> & Readonly<{
+    onDropDownItemClicked?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
 
 export declare interface DropDownItemsInterface {
     ariaLabel: string;
@@ -247,7 +305,7 @@ export declare interface FolderItemInterface {
     folderName: string;
 }
 
-export declare const FormGroup: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
+export declare const FormGroup: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
 
 export declare interface MenuItemInterface {
     ariaLabel: string;
@@ -452,7 +510,7 @@ export declare const PasswordInput: DefineComponent<ExtractPropTypes<{
     placeholderText: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
 
-export declare const RenderErrorMessage: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
+export declare const RenderErrorMessage: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
 
 export declare const SwitchComponent: DefineComponent<ExtractPropTypes<{
     label: {

package/dist/whelk-ui.css

@@ -1 +1 @@
-button[data-v-3de7a432]{padding:.5rem 1rem;border:var(--border);border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);color:var(--text)}button.compact[data-v-3de7a432]{padding:.25rem .125rem;font-size:.75rem;line-height:1rem}button.tiny[data-v-3de7a432]{padding:.125rem 0rem;font-size:.75rem;line-height:.75rem}button.primary[data-v-3de7a432]{background-color:var(--primary);border-color:var(--primary)}button.primary:hover[data-v-3de7a432]:enabled{background-color:var(--primary-hover)}button.secondary[data-v-3de7a432]{background-color:var(--secondary);border-color:var(--secondary)}button.secondary:hover[data-v-3de7a432]:enabled{background-color:var(--secondary-hover)}button.danger[data-v-3de7a432]{background-color:var(--danger);border-color:var(--danger)}button.danger:hover[data-v-3de7a432]:enabled{background-color:var(--danger-hover)}button.warning[data-v-3de7a432]{background-color:var(--warning);border-color:var(--warning)}button.warning:hover[data-v-3de7a432]:enabled{background-color:var(--warning-hover)}button.success[data-v-3de7a432]{background-color:var(--success);border-color:var(--success)}button.success:hover[data-v-3de7a432]:enabled{background-color:var(--success-hover)}button.info[data-v-3de7a432]{background-color:var(--info);border-color:var(--info)}button.info:hover[data-v-3de7a432]:enabled{background-color:var(--info-hover)}button.loading[data-v-3de7a432]{animation:loading-animation-3de7a432 1s infinite linear}@keyframes loading-animation-3de7a432{0%{color:var(--text)}50%{color:var(--text-muted)}to{color:var(--text)}}.card[data-v-025f3983]{border-radius:var(--border-radius);background-color:var(--bg-light)}.checkbox-component label[data-v-39385668],.checkbox-component input[data-v-39385668]{padding:.5rem}.form-group[data-v-142c8936]{display:flex;flex-direction:column;margin-bottom:1.75rem}.form-group.compact[data-v-142c8936]{margin-bottom:.5rem}.render-error-message[data-v-e384ff35]{color:var(--text-red);font-weight:lighter;font-size:1rem;line-height:1.125rem;padding:0;margin:0}.render-error-message>svg[data-v-e384ff35]{transform:translateY(.125rem)}@media(--large-screen){.render-error-message[data-v-e384ff35]{font-size:.75rem}}p[data-v-e384ff35]:before{content:" ";white-space:pre}.tooltip[data-v-5121adbc]{display:none;position:absolute;z-index:10;padding:.75rem .25rem;background-color:var(--bg-dark);border-color:var(--border-muted);border-width:var(--border-width);border-style:var(--border-style);border-radius:var(--border-radius);transform:translateY(-100%) translateY(-.5rem);max-width:75vw}.tooltip.show[data-v-5121adbc]{display:inline-block}.tooltip>.tooltip-title[data-v-5121adbc]{margin:0 0 .125rem;color:var(--text-red)}.tooltip>.tooltip-message[data-v-5121adbc]{font-weight:lighter;margin:0;color:var(--text-muted)}@media(--large-screen){.tooltip[data-v-5121adbc]{max-width:50vw}}svg[data-v-5121adbc]{width:1rem;height:1rem;color:var(--text-muted)}.datetime-component label[data-v-905d8a98]{margin-bottom:6px}.datetime-component span[data-v-905d8a98]{color:var(--text-red)}.datetime-component input[data-v-905d8a98]{border-style:var(--border-style);border-width:var(--border-width);border-radius:var(--border-radius);border-color:var(--border);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.datetime-component input[data-v-905d8a98]:focus{border-color:var(--secondary);border-width:2px;outline:none;padding:calc(.5rem - 1px)}.datetime-component.compact>label[data-v-905d8a98]{font-size:1rem;line-height:1.25rem;margin-bottom:2px}@media(--large-screen){.datetime-component.compact>label[data-v-905d8a98]{font-size:.75rem;line-height:1rem}}.datetime-component.compact>input[data-v-905d8a98]{font-size:1.25rem;line-height:1.5rem;padding:.25rem}@media(--large-screen){.datetime-component.compact>input[data-v-905d8a98]{font-size:1rem;line-height:1.25rem}}.drop-down-items[data-v-eb1af184]{position:absolute;background-color:var(--bg-light);border:solid;border-width:var(--border-width);border-radius:var(--border-radius);border-color:var(--border-muted);z-index:20}.drop-down-items>.drop-down-item[data-v-eb1af184]{padding:.25rem .5rem}.drop-down-items>.drop-down-item[data-v-eb1af184]:hover{background-color:var(--bg-dark)}.drop-down-items>.drop-down-item>svg[data-v-eb1af184]{width:.75rem;height:.75rem}.drop-down>button[data-v-755569e8]{border:solid;border-width:1px;border-radius:var(--border-radius);border-color:var(--border-muted);background:var(--bg-light);box-shadow:none;font-size:1rem;line-height:1.25rem;height:2rem;padding:0 1rem;position:relative;z-index:10}.drop-down>button>svg[data-v-755569e8]{width:1rem;height:1rem;transform:translateY(2px)}.drop-down .drop-down-backdrop[data-v-755569e8]{width:100vw;height:100dvh;z-index:5;background-color:#000000b3;position:fixed;top:0;left:0}.v-enter-active[data-v-755569e8],.v-leave-active[data-v-755569e8]{transition:opacity .5s ease}.v-enter-from[data-v-755569e8],.v-leave-to[data-v-755569e8]{opacity:0}.number-input>label[data-v-06558243]{margin-bottom:6px}.number-input>.number-input-row[data-v-06558243]{display:grid;grid-template-columns:3rem minmax(0,1fr) 3rem}.number-input>.number-input-row>.negative[data-v-06558243]{border-radius:var(--border-radius) 0 0 var(--border-radius);border-width:var(--border-width) 0 var(--border-width) var(--border-width)}.number-input>.number-input-row>input[data-v-06558243]{border-style:var(--border-style);border-width:var(--border-width);border-radius:0;border-color:var(--border);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.number-input>.number-input-row>input[data-v-06558243]:focus{border-color:var(--secondary);border-width:2px;outline:none;padding:calc(.5rem - 1px)}.number-input>.number-input-row>.positive[data-v-06558243]{border-radius:0 var(--border-radius) var(--border-radius) 0;border-width:var(--border-width) var(--border-width) var(--border-width) 0}.number-input.compact>label[data-v-06558243]{font-size:1rem;line-height:1.25rem;margin-bottom:2px}@media(--large-screen){.number-input.compact>label[data-v-06558243]{font-size:.75rem;line-height:1rem}}.number-input.compact>.number-input-row[data-v-06558243]{grid-template-columns:2.5rem minmax(0,1fr) 2.5rem}.number-input.compact>.number-input-row>input[data-v-06558243]{font-size:1.25rem;line-height:1.5rem;padding:.25rem}@media(--large-screen){.number-input.compact>.number-input-row>input[data-v-06558243]{font-size:1rem;line-height:1.25rem}}input[data-v-06558243]::-webkit-outer-spin-button,input[data-v-06558243]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-06558243]{-moz-appearance:textfield}.text-input>label[data-v-d179e9e2]{margin-bottom:6px}.text-input>span[data-v-d179e9e2]{color:var(--text-red)}.text-input>input[data-v-d179e9e2]{border-style:var(--border-style);border-width:var(--border-width);border-radius:var(--border-radius);border-color:var(--border);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.text-input>input[data-v-d179e9e2]:focus{border-color:var(--secondary);border-width:2px;outline:none;padding:calc(.5rem - 1px)}.text-input.compact>label[data-v-d179e9e2]{font-size:1rem;line-height:1.25rem;margin-bottom:2px}@media(--large-screen){.text-input.compact>label[data-v-d179e9e2]{font-size:.75rem;line-height:1rem}}.text-input.compact>input[data-v-d179e9e2]{font-size:1.25rem;line-height:1.5rem;padding:.25rem}.text-input.compact>input[data-v-d179e9e2]:focus{padding:calc(.25rem - 1px)}@media(--large-screen){.text-input.compact>input[data-v-d179e9e2]{font-size:1rem;line-height:1.25rem}}.switch-component[data-v-f28e5f26]{width:100%}.switch-component>.switch[data-v-f28e5f26]{display:grid;grid-template-columns:[on] 2rem [text] minmax(0,1fr) [off] 2rem;border-style:var(--border-style);border-width:var(--border-width);border-radius:var(--border-radius);border-color:var(--border);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.switch-component>.switch>.switch-block[data-v-f28e5f26]{width:2rem;height:2rem;background-color:#ff69b4}.switch-component>.switch>.switch-text[data-v-f28e5f26]{display:grid;grid-area:text;text-align:center;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.switch-component>.switch.on>.switch-block[data-v-f28e5f26]{grid-area:on;background-color:var(--success)}.switch-component>.switch.off>.switch-block[data-v-f28e5f26]{grid-area:off;background-color:var(--info)}.switch-component.compact>label[data-v-f28e5f26]{font-size:1rem;line-height:1.25rem}.switch-component.compact>.switch[data-v-f28e5f26]{grid-template-columns:[on] 1rem [text] minmax(0,1fr) [off] 1rem}.switch-component.compact>.switch>.switch-block[data-v-f28e5f26]{width:1rem;height:1rem}.switch-component.compact>.switch>.switch-text[data-v-f28e5f26]{font-size:.75rem;line-height:1rem}label[data-v-88c9adeb]{margin-bottom:6px}span[data-v-88c9adeb]{color:var(--text-red)}textarea[data-v-88c9adeb]{border-style:var(--border-style);border-width:var(--border-width);border-radius:var(--border-radius);border-color:var(--border);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}textarea[data-v-88c9adeb]:focus{border-color:var(--secondary);border-width:2px;outline:none;padding:calc(.5rem - 1px)}.text-input>label[data-v-354652ea]{margin-bottom:6px}.text-input>span[data-v-354652ea]{color:var(--text-red)}.text-input>input[data-v-354652ea]{border-style:var(--border-style);border-width:var(--border-width);border-radius:var(--border-radius);border-color:var(--border);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.text-input>input[data-v-354652ea]:focus{border-color:var(--secondary);border-width:2px;outline:none;padding:calc(.5rem - 1px)}.text-input.compact>label[data-v-354652ea]{font-size:1rem;line-height:1.25rem;margin-bottom:2px}@media(--large-screen){.text-input.compact>label[data-v-354652ea]{font-size:.75rem;line-height:1rem}}.text-input.compact>input[data-v-354652ea]{font-size:1.25rem;line-height:1.5rem;padding:.25rem}.text-input.compact>input[data-v-354652ea]:focus{padding:calc(.25rem - 1px)}@media(--large-screen){.text-input.compact>input[data-v-354652ea]{font-size:1rem;line-height:1.25rem}}:root{--border-radius: 5px;--border-style: solid;--border-width: 1px;--bg-dark: hsl(26 53% 89%);--bg: hsl(26 100% 94%);--bg-light: hsl(26 100% 100%);--text: hsl(16 100% 4%);--text-red: hsl(8, 93%, 43%);--text-muted: hsl(26 35% 27%);--highlight: hsl(26 100% 99%);--border: hsl(26 21% 49%);--border-muted: hsl(26 27% 61%);--primary: hsl(27 65% 66%);--primary-hover: hsl(27 65% 76%);--secondary: hsl(204 74% 68%);--secondary-hover: hsl(204 74% 78%);--danger: hsl(9 26% 64%);--danger-hover: hsl(9 26% 74%);--warning: hsl(52 19% 57%);--warning-hover: hsl(52 19% 67%);--success: hsl(146 17% 59%);--success-hover: hsl(146 17% 69%);--info: hsl(217 28% 65%);--info-hover: hsl(217 28% 75%);--document-links: hsl(203.53, 40.8%, 24.51%);--document-links-hover: hsl(203.53, 40.8%, 75.51%);--customer-background: hsl(203.53, 40.8%, 75.49%);--customer-text: hsl(203.53, 40.8%, 24.51%);--kanban-board-background: hsl(78.26, 88.46%, 89.8%);--kanban-board-text: hsl(78.26, 88.46%, 10.2%);--kanban-card-background: hsl(74.12, 35.56%, 53.14%);--kanban-card-text: hsl(74.12, 35.56%, 10.86%);--organisation-background: hsl(52.05, 85.57%, 61.96%);--organisation-text: hsl(52.05, 85.57%, 8.04%);--request-for-change-background: hsl(67.61, 100%, 72.16%);--request-for-change-text: hsl(67.61, 100%, 7.84%);--requirement-background: hsl(200.31, 94.2%, 86.47%);--requirement-text: hsl(200.31, 94.2%, 10.53%);--requirement-item-background: hsl(322.8, 29.76%, 67.06%);--requirement-item-text: hsl(322.8, 29.76%, 8.94%);--project-background: hsl(333.62, 49.57%, 45.88%);--project-text: hsl(333.62, 49.57%, 8.12%);--task-background: hsl(224, 10.2%, 71.82%);--task-text: hsl(224, 10.2%, 7.18%)}.dark{--bg-dark: hsl(16 100% 2%);--bg: hsl(22 76% 4%);--bg-light: hsl(26 50% 8%);--text: hsl(26 100% 94%);--text-red: hsl(8, 93%, 23%);--text-muted: hsl(26 34% 68%);--highlight: hsl(26 26% 38%);--border: hsl(26 35% 27%);--border-muted: hsl(27 56% 16%);--primary: hsl(32 100% 20%);--primary-hover: hsl(32 100% 10%);--secondary: hsl(198 100% 20%);--secondary-hover: hsl(198 100% 10%);--danger: hsl(9 21% 41%);--danger-hover: hsl(9 21% 31%);--warning: hsl(52 23% 34%);--warning-hover: hsl(52 23% 24%);--success: hsl(147 19% 36%);--success-hover: hsl(147 19% 26%);--info: hsl(217 22% 41%);--info-hover: hsl(217 22% 31%)}
+button[data-v-3de7a432]{padding:.5rem 1rem;border:var(--border);border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);color:var(--text)}button.compact[data-v-3de7a432]{padding:.25rem .125rem;font-size:.75rem;line-height:1rem}button.tiny[data-v-3de7a432]{padding:.125rem 0rem;font-size:.75rem;line-height:.75rem}button.primary[data-v-3de7a432]{background-color:var(--primary);border-color:var(--primary)}button.primary:hover[data-v-3de7a432]:enabled{background-color:var(--primary-hover)}button.secondary[data-v-3de7a432]{background-color:var(--secondary);border-color:var(--secondary)}button.secondary:hover[data-v-3de7a432]:enabled{background-color:var(--secondary-hover)}button.danger[data-v-3de7a432]{background-color:var(--danger);border-color:var(--danger)}button.danger:hover[data-v-3de7a432]:enabled{background-color:var(--danger-hover)}button.warning[data-v-3de7a432]{background-color:var(--warning);border-color:var(--warning)}button.warning:hover[data-v-3de7a432]:enabled{background-color:var(--warning-hover)}button.success[data-v-3de7a432]{background-color:var(--success);border-color:var(--success)}button.success:hover[data-v-3de7a432]:enabled{background-color:var(--success-hover)}button.info[data-v-3de7a432]{background-color:var(--info);border-color:var(--info)}button.info:hover[data-v-3de7a432]:enabled{background-color:var(--info-hover)}button.loading[data-v-3de7a432]{animation:loading-animation-3de7a432 1s infinite linear}@keyframes loading-animation-3de7a432{0%{color:var(--text)}50%{color:var(--text-muted)}to{color:var(--text)}}.card[data-v-025f3983]{border-radius:var(--border-radius);background-color:var(--bg-light)}.card-footer[data-v-86222ad6]{padding:0 0 .75rem}@media(--large-screen){.card-footer[data-v-86222ad6]{margin:1rem -2rem -1rem;padding:1rem 2rem;border-radius:0 0 var(--border-radius) var(--border-radius)}}.card-header[data-v-9e7cf920]{border-radius:0}@media(--large-screen){.card-header[data-v-9e7cf920]{border-radius:var(--border-radius) var(--border-radius) 0 0}}.checkbox-component label[data-v-39385668],.checkbox-component input[data-v-39385668]{padding:.5rem}.form-group[data-v-142c8936]{display:flex;flex-direction:column;margin-bottom:1.75rem}.form-group.compact[data-v-142c8936]{margin-bottom:.5rem}.render-error-message[data-v-e384ff35]{color:var(--text-red);font-weight:lighter;font-size:1rem;line-height:1.125rem;padding:0;margin:0}.render-error-message>svg[data-v-e384ff35]{transform:translateY(.125rem)}@media(--large-screen){.render-error-message[data-v-e384ff35]{font-size:.75rem}}p[data-v-e384ff35]:before{content:" ";white-space:pre}.tooltip[data-v-5121adbc]{display:none;position:absolute;z-index:10;padding:.75rem .25rem;background-color:var(--bg-dark);border-color:var(--border-muted);border-width:var(--border-width);border-style:var(--border-style);border-radius:var(--border-radius);transform:translateY(-100%) translateY(-.5rem);max-width:75vw}.tooltip.show[data-v-5121adbc]{display:inline-block}.tooltip>.tooltip-title[data-v-5121adbc]{margin:0 0 .125rem;color:var(--text-red)}.tooltip>.tooltip-message[data-v-5121adbc]{font-weight:lighter;margin:0;color:var(--text-muted)}@media(--large-screen){.tooltip[data-v-5121adbc]{max-width:50vw}}svg[data-v-5121adbc]{width:1rem;height:1rem;color:var(--text-muted)}.datetime-component label[data-v-905d8a98]{margin-bottom:6px}.datetime-component span[data-v-905d8a98]{color:var(--text-red)}.datetime-component input[data-v-905d8a98]{border-style:var(--border-style);border-width:var(--border-width);border-radius:var(--border-radius);border-color:var(--border);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.datetime-component input[data-v-905d8a98]:focus{border-color:var(--secondary);border-width:2px;outline:none;padding:calc(.5rem - 1px)}.datetime-component.compact>label[data-v-905d8a98]{font-size:1rem;line-height:1.25rem;margin-bottom:2px}@media(--large-screen){.datetime-component.compact>label[data-v-905d8a98]{font-size:.75rem;line-height:1rem}}.datetime-component.compact>input[data-v-905d8a98]{font-size:1.25rem;line-height:1.5rem;padding:.25rem}@media(--large-screen){.datetime-component.compact>input[data-v-905d8a98]{font-size:1rem;line-height:1.25rem}}.drop-down-items[data-v-7a71b3ac]{position:absolute;background-color:var(--bg-light);border:solid;border-width:var(--border-width);border-radius:var(--border-radius);border-color:var(--border-muted);z-index:20}.drop-down-items>.drop-down-item[data-v-7a71b3ac]{padding:.25rem .5rem}.drop-down-items>.drop-down-item[data-v-7a71b3ac]:hover{background-color:var(--bg-dark)}.drop-down-items>.drop-down-item>svg[data-v-7a71b3ac]{width:.75rem;height:.75rem}.drop-down>button[data-v-539fd54a]{border:solid;border-width:1px;border-radius:var(--border-radius);border-color:var(--border-muted);background:var(--bg-light);box-shadow:none;font-size:1rem;line-height:1.25rem;height:2rem;padding:0 1rem;position:relative;z-index:10}.drop-down>button>svg[data-v-539fd54a]{width:1rem;height:1rem;transform:translateY(2px)}.drop-down .drop-down-backdrop[data-v-539fd54a]{width:100vw;height:100dvh;z-index:5;background-color:#000000b3;position:fixed;top:0;left:0}.v-enter-active[data-v-539fd54a],.v-leave-active[data-v-539fd54a]{transition:opacity .5s ease}.v-enter-from[data-v-539fd54a],.v-leave-to[data-v-539fd54a]{opacity:0}.number-input>label[data-v-06558243]{margin-bottom:6px}.number-input>.number-input-row[data-v-06558243]{display:grid;grid-template-columns:3rem minmax(0,1fr) 3rem}.number-input>.number-input-row>.negative[data-v-06558243]{border-radius:var(--border-radius) 0 0 var(--border-radius);border-width:var(--border-width) 0 var(--border-width) var(--border-width)}.number-input>.number-input-row>input[data-v-06558243]{border-style:var(--border-style);border-width:var(--border-width);border-radius:0;border-color:var(--border);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.number-input>.number-input-row>input[data-v-06558243]:focus{border-color:var(--secondary);border-width:2px;outline:none;padding:calc(.5rem - 1px)}.number-input>.number-input-row>.positive[data-v-06558243]{border-radius:0 var(--border-radius) var(--border-radius) 0;border-width:var(--border-width) var(--border-width) var(--border-width) 0}.number-input.compact>label[data-v-06558243]{font-size:1rem;line-height:1.25rem;margin-bottom:2px}@media(--large-screen){.number-input.compact>label[data-v-06558243]{font-size:.75rem;line-height:1rem}}.number-input.compact>.number-input-row[data-v-06558243]{grid-template-columns:2.5rem minmax(0,1fr) 2.5rem}.number-input.compact>.number-input-row>input[data-v-06558243]{font-size:1.25rem;line-height:1.5rem;padding:.25rem}@media(--large-screen){.number-input.compact>.number-input-row>input[data-v-06558243]{font-size:1rem;line-height:1.25rem}}input[data-v-06558243]::-webkit-outer-spin-button,input[data-v-06558243]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-06558243]{-moz-appearance:textfield}.text-input>label[data-v-d179e9e2]{margin-bottom:6px}.text-input>span[data-v-d179e9e2]{color:var(--text-red)}.text-input>input[data-v-d179e9e2]{border-style:var(--border-style);border-width:var(--border-width);border-radius:var(--border-radius);border-color:var(--border);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.text-input>input[data-v-d179e9e2]:focus{border-color:var(--secondary);border-width:2px;outline:none;padding:calc(.5rem - 1px)}.text-input.compact>label[data-v-d179e9e2]{font-size:1rem;line-height:1.25rem;margin-bottom:2px}@media(--large-screen){.text-input.compact>label[data-v-d179e9e2]{font-size:.75rem;line-height:1rem}}.text-input.compact>input[data-v-d179e9e2]{font-size:1.25rem;line-height:1.5rem;padding:.25rem}.text-input.compact>input[data-v-d179e9e2]:focus{padding:calc(.25rem - 1px)}@media(--large-screen){.text-input.compact>input[data-v-d179e9e2]{font-size:1rem;line-height:1.25rem}}.switch-component[data-v-f28e5f26]{width:100%}.switch-component>.switch[data-v-f28e5f26]{display:grid;grid-template-columns:[on] 2rem [text] minmax(0,1fr) [off] 2rem;border-style:var(--border-style);border-width:var(--border-width);border-radius:var(--border-radius);border-color:var(--border);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.switch-component>.switch>.switch-block[data-v-f28e5f26]{width:2rem;height:2rem;background-color:#ff69b4}.switch-component>.switch>.switch-text[data-v-f28e5f26]{display:grid;grid-area:text;text-align:center;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.switch-component>.switch.on>.switch-block[data-v-f28e5f26]{grid-area:on;background-color:var(--success)}.switch-component>.switch.off>.switch-block[data-v-f28e5f26]{grid-area:off;background-color:var(--info)}.switch-component.compact>label[data-v-f28e5f26]{font-size:1rem;line-height:1.25rem}.switch-component.compact>.switch[data-v-f28e5f26]{grid-template-columns:[on] 1rem [text] minmax(0,1fr) [off] 1rem}.switch-component.compact>.switch>.switch-block[data-v-f28e5f26]{width:1rem;height:1rem}.switch-component.compact>.switch>.switch-text[data-v-f28e5f26]{font-size:.75rem;line-height:1rem}label[data-v-88c9adeb]{margin-bottom:6px}span[data-v-88c9adeb]{color:var(--text-red)}textarea[data-v-88c9adeb]{border-style:var(--border-style);border-width:var(--border-width);border-radius:var(--border-radius);border-color:var(--border);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}textarea[data-v-88c9adeb]:focus{border-color:var(--secondary);border-width:2px;outline:none;padding:calc(.5rem - 1px)}.text-input>label[data-v-354652ea]{margin-bottom:6px}.text-input>span[data-v-354652ea]{color:var(--text-red)}.text-input>input[data-v-354652ea]{border-style:var(--border-style);border-width:var(--border-width);border-radius:var(--border-radius);border-color:var(--border);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.text-input>input[data-v-354652ea]:focus{border-color:var(--secondary);border-width:2px;outline:none;padding:calc(.5rem - 1px)}.text-input.compact>label[data-v-354652ea]{font-size:1rem;line-height:1.25rem;margin-bottom:2px}@media(--large-screen){.text-input.compact>label[data-v-354652ea]{font-size:.75rem;line-height:1rem}}.text-input.compact>input[data-v-354652ea]{font-size:1.25rem;line-height:1.5rem;padding:.25rem}.text-input.compact>input[data-v-354652ea]:focus{padding:calc(.25rem - 1px)}@media(--large-screen){.text-input.compact>input[data-v-354652ea]{font-size:1rem;line-height:1.25rem}}:root{--border-radius: 5px;--border-style: solid;--border-width: 1px;--bg-dark: hsl(26 53% 89%);--bg: hsl(26 100% 94%);--bg-light: hsl(26 100% 100%);--text: hsl(16 100% 4%);--text-red: hsl(8, 93%, 43%);--text-muted: hsl(26 35% 27%);--highlight: hsl(26 100% 99%);--border: hsl(26 21% 49%);--border-muted: hsl(26 27% 61%);--primary: hsl(27 65% 66%);--primary-hover: hsl(27 65% 76%);--secondary: hsl(204 74% 68%);--secondary-hover: hsl(204 74% 78%);--danger: hsl(9 26% 64%);--danger-hover: hsl(9 26% 74%);--warning: hsl(52 19% 57%);--warning-hover: hsl(52 19% 67%);--success: hsl(146 17% 59%);--success-hover: hsl(146 17% 69%);--info: hsl(217 28% 65%);--info-hover: hsl(217 28% 75%);--document-links: hsl(203.53, 40.8%, 24.51%);--document-links-hover: hsl(203.53, 40.8%, 75.51%);--customer-background: hsl(203.53, 40.8%, 75.49%);--customer-text: hsl(203.53, 40.8%, 24.51%);--kanban-board-background: hsl(78.26, 88.46%, 89.8%);--kanban-board-text: hsl(78.26, 88.46%, 10.2%);--kanban-card-background: hsl(74.12, 35.56%, 53.14%);--kanban-card-text: hsl(74.12, 35.56%, 10.86%);--organisation-background: hsl(52.05, 85.57%, 61.96%);--organisation-text: hsl(52.05, 85.57%, 8.04%);--request-for-change-background: hsl(67.61, 100%, 72.16%);--request-for-change-text: hsl(67.61, 100%, 7.84%);--requirement-background: hsl(200.31, 94.2%, 86.47%);--requirement-text: hsl(200.31, 94.2%, 10.53%);--requirement-item-background: hsl(322.8, 29.76%, 67.06%);--requirement-item-text: hsl(322.8, 29.76%, 8.94%);--project-background: hsl(333.62, 49.57%, 45.88%);--project-text: hsl(333.62, 49.57%, 8.12%);--task-background: hsl(224, 10.2%, 71.82%);--task-text: hsl(224, 10.2%, 7.18%)}.dark{--bg-dark: hsl(16 100% 2%);--bg: hsl(22 76% 4%);--bg-light: hsl(26 50% 8%);--text: hsl(26 100% 94%);--text-red: hsl(8, 93%, 23%);--text-muted: hsl(26 34% 68%);--highlight: hsl(26 26% 38%);--border: hsl(26 35% 27%);--border-muted: hsl(27 56% 16%);--primary: hsl(32 100% 20%);--primary-hover: hsl(32 100% 10%);--secondary: hsl(198 100% 20%);--secondary-hover: hsl(198 100% 10%);--danger: hsl(9 21% 41%);--danger-hover: hsl(9 21% 31%);--warning: hsl(52 23% 34%);--warning-hover: hsl(52 23% 24%);--success: hsl(147 19% 36%);--success-hover: hsl(147 19% 26%);--info: hsl(217 22% 41%);--info-hover: hsl(217 22% 31%)}

package/dist/whelk-ui.js

@@ -1,5 +1,5 @@
-import { defineComponent as x, openBlock as s, createElementBlock as f, unref as R, renderSlot as L, createCommentVNode as g, toDisplayString as y, useModel as k, computed as _, withDirectives as V, createElementVNode as m, vModelCheckbox as j, mergeModels as $, ref as q, resolveComponent as B, Fragment as O, normalizeClass as A, withKeys as F, createVNode as I, createBlock as h, withCtx as N, createTextVNode as S, vModelText as D, renderList as G, resolveDynamicComponent as K, Transition as E, vShow as U } from "vue";
-const C = {
+import { defineComponent as I, openBlock as s, createElementBlock as p, unref as R, renderSlot as k, createCommentVNode as _, toDisplayString as y, useModel as V, computed as b, withDirectives as S, createElementVNode as m, vModelCheckbox as B, mergeModels as $, ref as q, resolveComponent as F, Fragment as O, normalizeClass as A, withKeys as G, createVNode as x, createBlock as h, withCtx as N, createTextVNode as M, vModelText as D, renderList as K, resolveDynamicComponent as U, Transition as E, vShow as P } from "vue";
+const L = {
   Disable: "DISABLE",
   Error: "ERROR",
   Loading: "LOADING",
@@ -7,38 +7,50 @@ const C = {
   LoggingOut: "LOGGING_OUT",
   NoAction: "NO_ACTION",
   Saving: "SAVING"
-}, P = ["disabled"], z = { key: 1 }, X = /* @__PURE__ */ x({
+}, z = ["disabled"], H = { key: 1 }, X = /* @__PURE__ */ I({
   __name: "ButtonComponent",
   props: {
     objectState: {
       type: String,
-      default: C.NoAction,
+      default: L.NoAction,
       required: !1,
       validator: function(e) {
-        return Object.values(C).includes(e);
+        return Object.values(L).includes(e);
       }
     }
   },
   setup(e) {
-    return (a, o) => (s(), f("button", {
-      disabled: e.objectState !== R(C).NoAction
+    return (a, o) => (s(), p("button", {
+      disabled: e.objectState !== R(L).NoAction
     }, [
-      e.objectState === R(C).NoAction ? L(a.$slots, "default", { key: 0 }, void 0, !0) : g("", !0),
-      e.objectState !== R(C).NoAction ? (s(), f("span", z, y(e.objectState), 1)) : g("", !0)
-    ], 8, P));
+      e.objectState === R(L).NoAction ? k(a.$slots, "default", { key: 0 }, void 0, !0) : _("", !0),
+      e.objectState !== R(L).NoAction ? (s(), p("span", H, y(e.objectState), 1)) : _("", !0)
+    ], 8, z));
   }
-}), b = (e, a) => {
+}), g = (e, a) => {
   const o = e.__vccOpts || e;
   for (const [t, i] of a)
     o[t] = i;
   return o;
-}, H = /* @__PURE__ */ b(X, [["__scopeId", "data-v-3de7a432"]]), J = {}, Q = { class: "card" };
-function W(e, a) {
-  return s(), f("div", Q, [
-    L(e.$slots, "default", {}, void 0, !0)
+}, J = /* @__PURE__ */ g(X, [["__scopeId", "data-v-3de7a432"]]), Q = {}, W = { class: "card" };
+function Y(e, a) {
+  return s(), p("div", W, [
+    k(e.$slots, "default", {}, void 0, !0)
   ]);
 }
-const Y = /* @__PURE__ */ b(J, [["render", W], ["__scopeId", "data-v-025f3983"]]), Z = { class: "checkbox-component" }, ee = ["id", "name"], te = ["for"], ae = /* @__PURE__ */ x({
+const Z = /* @__PURE__ */ g(Q, [["render", Y], ["__scopeId", "data-v-025f3983"]]), ee = {}, te = { class: "card-footer" };
+function ae(e, a) {
+  return s(), p("div", te, [
+    k(e.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const le = /* @__PURE__ */ g(ee, [["render", ae], ["__scopeId", "data-v-86222ad6"]]), oe = {}, ne = { class: "card-header" };
+function re(e, a) {
+  return s(), p("div", ne, [
+    k(e.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const se = /* @__PURE__ */ g(oe, [["render", re], ["__scopeId", "data-v-9e7cf920"]]), ie = { class: "checkbox-component" }, ue = ["id", "name"], de = ["for"], ce = /* @__PURE__ */ I({
   __name: "CheckBox",
   props: /* @__PURE__ */ $({
     id: {
@@ -55,35 +67,35 @@ const Y = /* @__PURE__ */ b(J, [["render", W], ["__scopeId", "data-v-025f3983"]]
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const a = k(e, "modelValue"), o = e, t = _(() => `checkbox-${o.id}`);
-    return (i, l) => (s(), f("div", Z, [
-      V(m("input", {
+    const a = V(e, "modelValue"), o = e, t = b(() => `checkbox-${o.id}`);
+    return (i, l) => (s(), p("div", ie, [
+      S(m("input", {
         id: t.value,
         name: e.label,
         "onUpdate:modelValue": l[0] || (l[0] = (n) => a.value = n),
         type: "checkbox"
-      }, null, 8, ee), [
-        [j, a.value]
+      }, null, 8, ue), [
+        [B, a.value]
       ]),
-      m("label", { for: t.value }, y(o.label), 9, te)
+      m("label", { for: t.value }, y(o.label), 9, de)
     ]));
   }
-}), le = /* @__PURE__ */ b(ae, [["__scopeId", "data-v-39385668"]]), oe = {}, ne = { class: "form-group" };
-function re(e, a) {
-  return s(), f("div", ne, [
-    L(e.$slots, "default", {}, void 0, !0)
+}), me = /* @__PURE__ */ g(ce, [["__scopeId", "data-v-39385668"]]), pe = {}, fe = { class: "form-group" };
+function ve(e, a) {
+  return s(), p("div", fe, [
+    k(e.$slots, "default", {}, void 0, !0)
   ]);
 }
-const M = /* @__PURE__ */ b(oe, [["render", re], ["__scopeId", "data-v-142c8936"]]), ie = {}, se = { class: "render-error-message" };
-function ue(e, a) {
-  return s(), f("span", se, [
-    L(e.$slots, "default", {}, void 0, !0)
+const T = /* @__PURE__ */ g(pe, [["render", ve], ["__scopeId", "data-v-142c8936"]]), ge = {}, _e = { class: "render-error-message" };
+function he(e, a) {
+  return s(), p("span", _e, [
+    k(e.$slots, "default", {}, void 0, !0)
   ]);
 }
-const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"]]), de = ["id"], ce = {
+const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"]]), be = ["id"], ye = {
   key: 0,
   class: "tooltip-title"
-}, me = { class: "tooltip-message" }, pe = ["data-tooltip-target"], fe = /* @__PURE__ */ x({
+}, $e = { class: "tooltip-message" }, qe = ["data-tooltip-target"], Ie = /* @__PURE__ */ I({
   __name: "ToolTip",
   props: {
     id: {
@@ -100,18 +112,18 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
     }
   },
   setup(e) {
-    const a = e, o = _(() => `tooltip-${a.id}`), t = q("tooltip");
+    const a = e, o = b(() => `tooltip-${a.id}`), t = q("tooltip");
     return (i, l) => {
-      const n = B("Info");
-      return s(), f(O, null, [
+      const n = F("Info");
+      return s(), p(O, null, [
         m("div", {
           id: o.value,
           class: A(t.value),
           role: "tooltip"
         }, [
-          a.title !== "" && a.title !== null && a.title !== void 0 ? (s(), f("p", ce, y(a.title), 1)) : g("", !0),
-          m("p", me, y(a.message), 1)
-        ], 10, de),
+          a.title !== "" && a.title !== null && a.title !== void 0 ? (s(), p("p", ye, y(a.title), 1)) : _("", !0),
+          m("p", $e, y(a.message), 1)
+        ], 10, be),
         m("span", {
           "data-tooltip-target": o.value,
           type: "tooltip",
@@ -119,17 +131,17 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
           onMouseleave: l[1] || (l[1] = (u) => t.value = "tooltip"),
           onFocus: l[2] || (l[2] = (u) => t.value = "tooltip show"),
           onBlur: l[3] || (l[3] = (u) => t.value = "tooltip"),
-          onKeydown: l[4] || (l[4] = F((u) => t.value = "tooltip", ["esc"]))
+          onKeydown: l[4] || (l[4] = G((u) => t.value = "tooltip", ["esc"]))
         }, [
-          I(n)
-        ], 40, pe)
+          x(n)
+        ], 40, qe)
       ], 64);
     };
   }
-}), T = /* @__PURE__ */ b(fe, [["__scopeId", "data-v-5121adbc"]]), ve = ["for"], ge = {
+}), C = /* @__PURE__ */ g(Ie, [["__scopeId", "data-v-5121adbc"]]), xe = ["for"], Ne = {
   key: 1,
   "aria-description": "Field is required"
-}, be = ["id", "name"], he = /* @__PURE__ */ x({
+}, ke = ["id", "name"], Ve = /* @__PURE__ */ I({
   __name: "DatetimeComponent",
   props: /* @__PURE__ */ $({
     isRequired: {
@@ -159,40 +171,40 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
   }),
   emits: /* @__PURE__ */ $(["isValid"], ["update:model"]),
   setup(e, { emit: a }) {
-    const o = a, t = e, i = k(e, "model"), l = q(!1), n = q(""), u = _(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
+    const o = a, t = e, i = V(e, "model"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
     function v() {
       l.value = !1, n.value = "";
       let r = Number(i?.value?.toString().length);
       r = isNaN(r) ? 0 : r, t.isRequired && r === 0 && (l.value = !0, n.value = "This field is required"), o("isValid", !l.value);
     }
-    return (r, c) => (s(), h(M, { class: "datetime-component" }, {
+    return (r, c) => (s(), h(T, { class: "datetime-component" }, {
       default: N(() => [
         m("label", { for: u.value }, [
-          t.tooltipMessage !== "" ? (s(), h(T, {
+          t.tooltipMessage !== "" ? (s(), h(C, {
             key: 0,
             title: e.tooltipTitle,
             message: e.tooltipMessage,
             id: u.value
-          }, null, 8, ["title", "message", "id"])) : g("", !0),
-          S(" " + y(e.label), 1),
-          e.isRequired ? (s(), f("span", ge, "*")) : g("", !0)
-        ], 8, ve),
-        V(m("input", {
+          }, null, 8, ["title", "message", "id"])) : _("", !0),
+          M(" " + y(e.label), 1),
+          e.isRequired ? (s(), p("span", Ne, "*")) : _("", !0)
+        ], 8, xe),
+        S(m("input", {
           id: u.value,
           type: "datetime-local",
           name: t.label,
           "onUpdate:modelValue": c[0] || (c[0] = (d) => i.value = d),
           onKeyup: v,
           onFocusout: v
-        }, null, 40, be), [
+        }, null, 40, ke), [
           [D, i.value]
         ]),
-        I(w, { "error-message": n.value }, null, 8, ["error-message"])
+        x(w, { "error-message": n.value }, null, 8, ["error-message"])
       ]),
       _: 1
     }));
   }
-}), _e = /* @__PURE__ */ b(he, [["__scopeId", "data-v-905d8a98"]]), ye = { class: "drop-down-items" }, $e = ["onClick"], qe = /* @__PURE__ */ x({
+}), Se = /* @__PURE__ */ g(Ve, [["__scopeId", "data-v-905d8a98"]]), Me = { class: "drop-down-items" }, Te = ["onClick"], Ce = /* @__PURE__ */ I({
   __name: "DropDownItem",
   props: {
     dropDownItems: {
@@ -206,18 +218,18 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
     function t(i) {
       o("dropDownItemClicked", i);
     }
-    return (i, l) => (s(), f("div", ye, [
-      (s(!0), f(O, null, G(e.dropDownItems, (n) => (s(), f("div", {
+    return (i, l) => (s(), p("div", Me, [
+      (s(!0), p(O, null, K(e.dropDownItems, (n) => (s(), p("div", {
         class: "drop-down-item",
         onClick: (u) => t(n.trigger),
         key: n.label
       }, [
-        (s(), h(K(n.icon))),
-        S(" " + y(n.label), 1)
-      ], 8, $e))), 128))
+        (s(), h(U(n.icon))),
+        M(" " + y(n.label), 1)
+      ], 8, Te))), 128))
     ]));
   }
-}), xe = /* @__PURE__ */ b(qe, [["__scopeId", "data-v-eb1af184"]]), Ie = { class: "drop-down" }, Ne = /* @__PURE__ */ x({
+}), j = /* @__PURE__ */ g(Ce, [["__scopeId", "data-v-7a71b3ac"]]), we = { class: "drop-down" }, Le = /* @__PURE__ */ I({
   __name: "DropDown",
   props: {
     dropDownItems: {
@@ -234,37 +246,37 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
     function l(n) {
       o("dropDownItemClicked", n), t.value = !1;
     }
-    return (n, u) => (s(), f("div", Ie, [
+    return (n, u) => (s(), p("div", we, [
       m("button", {
         type: "button",
         onClick: i
       }, [
-        L(n.$slots, "default", {}, void 0, !0)
+        k(n.$slots, "default", {}, void 0, !0)
       ]),
-      I(E, null, {
+      x(E, null, {
         default: N(() => [
-          V(I(xe, {
+          S(x(j, {
             onDropDownItemClicked: l,
             "drop-down-items": e.dropDownItems
           }, null, 8, ["drop-down-items"]), [
-            [U, t.value]
+            [P, t.value]
           ])
         ]),
         _: 1
       }),
-      I(E, null, {
+      x(E, null, {
         default: N(() => [
-          t.value ? (s(), f("div", {
+          t.value ? (s(), p("div", {
             key: 0,
             onClick: i,
             class: "drop-down-backdrop"
-          })) : g("", !0)
+          })) : _("", !0)
         ]),
         _: 1
       })
     ]));
   }
-}), ke = /* @__PURE__ */ b(Ne, [["__scopeId", "data-v-755569e8"]]), Ve = ["for"], Se = { class: "number-input-row" }, Me = ["aria-label", "disabled"], Te = ["aria-label", "disabled"], we = /* @__PURE__ */ x({
+}), De = /* @__PURE__ */ g(Le, [["__scopeId", "data-v-539fd54a"]]), Re = ["for"], Ee = { class: "number-input-row" }, Oe = ["aria-label", "disabled"], Ae = ["aria-label", "disabled"], je = /* @__PURE__ */ I({
   __name: "NumberInput",
   props: /* @__PURE__ */ $({
     label: {
@@ -302,7 +314,7 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const a = e, o = k(e, "modelValue"), t = q(""), i = _(() => "input-" + a.label?.toLowerCase()?.replace(" ", "-")), l = _(() => o.value >= a.maxValue), n = _(() => o.value <= a.minValue);
+    const a = e, o = V(e, "modelValue"), t = q(""), i = b(() => "input-" + a.label?.toLowerCase()?.replace(" ", "-")), l = b(() => o.value >= a.maxValue), n = b(() => o.value <= a.minValue);
     function u() {
       if (t.value = "", n.value) {
         t.value = "Reached Lowest Value";
@@ -325,35 +337,35 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
     }
     function r(c) {
       t.value = "";
-      let p = c.target?.valueAsNumber;
-      p === void 0 && (t.value = "Model is undefined - default 0", p = 0), isNaN(p) && (t.value = "Not a number - default 0", p = 0), p = p > a.maxValue ? a.maxValue : p, p = p < a.minValue ? a.minValue : p, o.value = p;
+      let f = c.target?.valueAsNumber;
+      f === void 0 && (t.value = "Model is undefined - default 0", f = 0), isNaN(f) && (t.value = "Not a number - default 0", f = 0), f = f > a.maxValue ? a.maxValue : f, f = f < a.minValue ? a.minValue : f, o.value = f;
     }
-    return (c, d) => (s(), h(M, { class: "number-input" }, {
+    return (c, d) => (s(), h(T, { class: "number-input" }, {
       default: N(() => [
         m("label", { for: i.value }, [
-          a.tooltipMessage !== "" ? (s(), h(T, {
+          a.tooltipMessage !== "" ? (s(), h(C, {
             key: 0,
             title: e.tooltipTitle,
             message: e.tooltipMessage,
             id: i.value
-          }, null, 8, ["title", "message", "id"])) : g("", !0),
-          S(" " + y(e.label), 1)
-        ], 8, Ve),
-        m("div", Se, [
+          }, null, 8, ["title", "message", "id"])) : _("", !0),
+          M(" " + y(e.label), 1)
+        ], 8, Re),
+        m("div", Ee, [
           m("button", {
             type: "button",
             class: "negative",
             "aria-label": `Decrement current value of ${o.value} by ${a.stepIncrement}`,
             disabled: n.value,
             onClick: u
-          }, " - ", 8, Me),
-          V(m("input", {
+          }, " - ", 8, Oe),
+          S(m("input", {
             type: "number",
             "aria-label": "Current value picked",
             "aria-describedby": "helper-text-explanation",
-            "onUpdate:modelValue": d[0] || (d[0] = (p) => o.value = p),
-            onChange: d[1] || (d[1] = (p) => r(p)),
-            onKeyup: d[2] || (d[2] = (p) => r(p))
+            "onUpdate:modelValue": d[0] || (d[0] = (f) => o.value = f),
+            onChange: d[1] || (d[1] = (f) => r(f)),
+            onKeyup: d[2] || (d[2] = (f) => r(f))
           }, null, 544), [
             [D, o.value]
           ]),
@@ -363,17 +375,17 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
             "aria-label": `Increment current value of ${o.value} by ${a.stepIncrement}`,
             disabled: l.value,
             onClick: v
-          }, " + ", 8, Te)
+          }, " + ", 8, Ae)
         ]),
-        I(w, { "error-message": t.value }, null, 8, ["error-message"])
+        x(w, { "error-message": t.value }, null, 8, ["error-message"])
       ]),
       _: 1
     }));
   }
-}), Ce = /* @__PURE__ */ b(we, [["__scopeId", "data-v-06558243"]]), Le = ["for"], De = {
+}), Be = /* @__PURE__ */ g(je, [["__scopeId", "data-v-06558243"]]), Fe = ["for"], Ge = {
   key: 1,
   "aria-description": "Field is required"
-}, Re = ["id", "name", "placeholder"], Ee = /* @__PURE__ */ x({
+}, Ke = ["id", "name", "placeholder"], Ue = /* @__PURE__ */ I({
   __name: "PasswordInput",
   props: /* @__PURE__ */ $({
     isRequired: {
@@ -411,25 +423,25 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
   }),
   emits: /* @__PURE__ */ $(["isValid"], ["update:modelValue"]),
   setup(e, { emit: a }) {
-    const o = a, t = e, i = k(e, "modelValue"), l = q(!1), n = q(""), u = _(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
+    const o = a, t = e, i = V(e, "modelValue"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
     function v() {
       l.value = !1, n.value = "";
       let r = Number(i?.value?.toString().length);
       r = isNaN(r) ? 0 : r, t.isRequired && r === 0 && (l.value = !0, n.value = "This field is required"), t.minLength > 0 && r < t.minLength && (l.value = !0, n.value = `This field has a minimum length ${r} / ${t.minLength}`), o("isValid", !l.value);
     }
-    return (r, c) => (s(), h(M, { class: "text-input" }, {
+    return (r, c) => (s(), h(T, { class: "text-input" }, {
       default: N(() => [
         m("label", { for: u.value }, [
-          t.tooltipMessage !== "" ? (s(), h(T, {
+          t.tooltipMessage !== "" ? (s(), h(C, {
             key: 0,
             title: e.tooltipTitle,
             message: e.tooltipMessage,
             id: u.value
-          }, null, 8, ["title", "message", "id"])) : g("", !0),
-          S(" " + y(e.label), 1),
-          e.isRequired ? (s(), f("span", De, "*")) : g("", !0)
-        ], 8, Le),
-        V(m("input", {
+          }, null, 8, ["title", "message", "id"])) : _("", !0),
+          M(" " + y(e.label), 1),
+          e.isRequired ? (s(), p("span", Ge, "*")) : _("", !0)
+        ], 8, Fe),
+        S(m("input", {
           id: u.value,
           type: "password",
           name: t.label,
@@ -437,15 +449,15 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
           "onUpdate:modelValue": c[0] || (c[0] = (d) => i.value = d),
           onKeyup: v,
           onFocusout: v
-        }, null, 40, Re), [
+        }, null, 40, Ke), [
           [D, i.value]
         ]),
-        I(w, { "error-message": n.value }, null, 8, ["error-message"])
+        x(w, { "error-message": n.value }, null, 8, ["error-message"])
       ]),
       _: 1
     }));
   }
-}), Oe = /* @__PURE__ */ b(Ee, [["__scopeId", "data-v-d179e9e2"]]), Ae = ["for"], je = { class: "switch-text" }, Be = /* @__PURE__ */ x({
+}), Pe = /* @__PURE__ */ g(Ue, [["__scopeId", "data-v-d179e9e2"]]), ze = ["for"], He = { class: "switch-text" }, Xe = /* @__PURE__ */ I({
   __name: "SwitchComponent",
   props: /* @__PURE__ */ $({
     label: {
@@ -480,36 +492,36 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const a = e, o = _(() => l.value ? "switch on" : "switch off"), t = _(() => "input-" + a.label?.toLowerCase()?.replace(" ", "-")), i = _(() => l.value ? a.onText : a.offText), l = k(e, "modelValue");
+    const a = e, o = b(() => l.value ? "switch on" : "switch off"), t = b(() => "input-" + a.label?.toLowerCase()?.replace(" ", "-")), i = b(() => l.value ? a.onText : a.offText), l = V(e, "modelValue");
     function n() {
       l.value = !l.value;
     }
-    return (u, v) => (s(), h(M, { class: "switch-component" }, {
+    return (u, v) => (s(), h(T, { class: "switch-component" }, {
       default: N(() => [
         m("label", { for: t.value }, [
-          a.tooltipMessage !== "" ? (s(), h(T, {
+          a.tooltipMessage !== "" ? (s(), h(C, {
             key: 0,
             title: e.tooltipTitle,
             message: e.tooltipMessage,
             id: t.value
-          }, null, 8, ["title", "message", "id"])) : g("", !0),
-          S(" " + y(e.label), 1)
-        ], 8, Ae),
+          }, null, 8, ["title", "message", "id"])) : _("", !0),
+          M(" " + y(e.label), 1)
+        ], 8, ze),
         m("div", {
           onClick: n,
           class: A(o.value)
         }, [
-          m("div", je, y(i.value), 1),
+          m("div", He, y(i.value), 1),
           v[0] || (v[0] = m("div", { class: "switch-block" }, null, -1))
         ], 2)
       ]),
       _: 1
     }));
   }
-}), Fe = /* @__PURE__ */ b(Be, [["__scopeId", "data-v-f28e5f26"]]), Ge = ["for"], Ke = {
+}), Je = /* @__PURE__ */ g(Xe, [["__scopeId", "data-v-f28e5f26"]]), Qe = ["for"], We = {
   key: 1,
   "aria-description": "Field is required"
-}, Ue = ["id", "name", "placeholder"], Pe = /* @__PURE__ */ x({
+}, Ye = ["id", "name", "placeholder"], Ze = /* @__PURE__ */ I({
   __name: "TextArea",
   props: /* @__PURE__ */ $({
     isRequired: {
@@ -557,25 +569,25 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
   }),
   emits: /* @__PURE__ */ $(["isValid"], ["update:model"]),
   setup(e, { emit: a }) {
-    const o = a, t = e, i = k(e, "model"), l = q(!1), n = q(""), u = _(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
+    const o = a, t = e, i = V(e, "model"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
     function v() {
       l.value = !1, n.value = "";
       let r = Number(i?.value?.toString().length);
       r = isNaN(r) ? 0 : r, t.isRequired && r === 0 && (l.value = !0, n.value = "This field is required"), t.minLength > 0 && r < t.minLength && (l.value = !0, n.value = `This field has a minimum length ${r} / ${t.minLength}`), t.maxLength > 0 && r > t.maxLength && (l.value = !0, n.value = `This field has a maximum length ${r} / ${t.maxLength}`), o("isValid", !l.value);
     }
-    return (r, c) => (s(), h(M, null, {
+    return (r, c) => (s(), h(T, null, {
       default: N(() => [
         m("label", { for: u.value }, [
-          t.tooltipMessage !== "" ? (s(), h(T, {
+          t.tooltipMessage !== "" ? (s(), h(C, {
             key: 0,
             title: e.tooltipTitle,
             message: e.tooltipMessage,
             id: u.value
-          }, null, 8, ["title", "message", "id"])) : g("", !0),
-          S(" " + y(e.label), 1),
-          e.isRequired ? (s(), f("span", Ke, "*")) : g("", !0)
-        ], 8, Ge),
-        V(m("textarea", {
+          }, null, 8, ["title", "message", "id"])) : _("", !0),
+          M(" " + y(e.label), 1),
+          e.isRequired ? (s(), p("span", We, "*")) : _("", !0)
+        ], 8, Qe),
+        S(m("textarea", {
           rows: "10",
           id: u.value,
           type: "text",
@@ -584,18 +596,18 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
           "onUpdate:modelValue": c[0] || (c[0] = (d) => i.value = d),
           onKeyup: v,
           onFocusout: v
-        }, null, 40, Ue), [
+        }, null, 40, Ye), [
           [D, i.value]
         ]),
-        I(w, { "error-message": n.value }, null, 8, ["error-message"])
+        x(w, { "error-message": n.value }, null, 8, ["error-message"])
       ]),
       _: 1
     }));
   }
-}), ze = /* @__PURE__ */ b(Pe, [["__scopeId", "data-v-88c9adeb"]]), Xe = ["for"], He = {
+}), et = /* @__PURE__ */ g(Ze, [["__scopeId", "data-v-88c9adeb"]]), tt = ["for"], at = {
   key: 1,
   "aria-description": "Field is required"
-}, Je = ["id", "name", "placeholder"], Qe = /* @__PURE__ */ x({
+}, lt = ["id", "name", "placeholder"], ot = /* @__PURE__ */ I({
   __name: "TextInput",
   props: /* @__PURE__ */ $({
     isRequired: {
@@ -639,25 +651,25 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
   }),
   emits: /* @__PURE__ */ $(["isValid"], ["update:modelValue"]),
   setup(e, { emit: a }) {
-    const o = a, t = e, i = k(e, "modelValue"), l = q(!1), n = q(""), u = _(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
+    const o = a, t = e, i = V(e, "modelValue"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
     function v() {
       l.value = !1, n.value = "";
       let r = Number(i?.value?.toString().length);
       r = isNaN(r) ? 0 : r, t.isRequired && r === 0 && (l.value = !0, n.value = "This field is required"), t.minLength > 0 && r < t.minLength && (l.value = !0, n.value = `This field has a minimum length ${r} / ${t.minLength}`), t.maxLength > 0 && r > t.maxLength && (l.value = !0, n.value = `This field has a maximum length ${r} / ${t.maxLength}`), o("isValid", !l.value);
     }
-    return (r, c) => (s(), h(M, { class: "text-input" }, {
+    return (r, c) => (s(), h(T, { class: "text-input" }, {
       default: N(() => [
         m("label", { for: u.value }, [
-          t.tooltipMessage !== "" ? (s(), h(T, {
+          t.tooltipMessage !== "" ? (s(), h(C, {
             key: 0,
             title: e.tooltipTitle,
             message: e.tooltipMessage,
             id: u.value
-          }, null, 8, ["title", "message", "id"])) : g("", !0),
-          S(" " + y(e.label), 1),
-          e.isRequired ? (s(), f("span", He, "*")) : g("", !0)
-        ], 8, Xe),
-        V(m("input", {
+          }, null, 8, ["title", "message", "id"])) : _("", !0),
+          M(" " + y(e.label), 1),
+          e.isRequired ? (s(), p("span", at, "*")) : _("", !0)
+        ], 8, tt),
+        S(m("input", {
           id: u.value,
           type: "text",
           name: t.label,
@@ -665,30 +677,33 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
           "onUpdate:modelValue": c[0] || (c[0] = (d) => i.value = d),
           onKeyup: v,
           onFocusout: v
-        }, null, 40, Je), [
+        }, null, 40, lt), [
           [D, i.value]
         ]),
-        I(w, { "error-message": n.value }, null, 8, ["error-message"])
+        x(w, { "error-message": n.value }, null, 8, ["error-message"])
       ]),
       _: 1
     }));
   }
-}), We = /* @__PURE__ */ b(Qe, [["__scopeId", "data-v-354652ea"]]), Ye = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), nt = /* @__PURE__ */ g(ot, [["__scopeId", "data-v-354652ea"]]), rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  ButtonComponent: H,
-  CardComponent: Y,
-  CheckBox: le,
-  DatetimeComponent: _e,
-  DropDown: ke,
-  FormGroup: M,
-  NumberInput: Ce,
-  PasswordInput: Oe,
+  ButtonComponent: J,
+  CardComponent: Z,
+  CardFooter: le,
+  CardHeader: se,
+  CheckBox: me,
+  DatetimeComponent: Se,
+  DropDown: De,
+  DropDownItem: j,
+  FormGroup: T,
+  NumberInput: Be,
+  PasswordInput: Pe,
   RenderErrorMessage: w,
-  SwitchComponent: Fe,
-  TextArea: ze,
-  TextInput: We,
-  ToolTip: T
-}, Symbol.toStringTag, { value: "Module" })), et = {
+  SwitchComponent: Je,
+  TextArea: et,
+  TextInput: nt,
+  ToolTip: C
+}, Symbol.toStringTag, { value: "Module" })), it = {
   customer: "Customer",
   group: "Group",
   kanban_board: "Kanban Board",
@@ -700,7 +715,7 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
   project: "Project",
   task: "Task",
   user: "User"
-}, tt = {
+}, ut = {
   customer: "customer",
   kanban_board: "kanban_board",
   kanban_card: "kanban_card",
@@ -710,29 +725,32 @@ const w = /* @__PURE__ */ b(ie, [["render", ue], ["__scopeId", "data-v-e384ff35"
   requirement_item: "requirement_item",
   project: "project",
   task: "task"
-}, at = {
+}, dt = {
   install(e) {
-    Object.entries(Ye).forEach(([a, o]) => {
+    Object.entries(rt).forEach(([a, o]) => {
       e.component(a, o);
     });
   }
 };
 export {
-  H as ButtonComponent,
-  Y as CardComponent,
-  le as CheckBox,
-  _e as DatetimeComponent,
-  ke as DropDown,
-  M as FormGroup,
-  Ce as NumberInput,
-  C as ObjectStateEnum,
-  et as ObjectTitleCaseEnums,
-  tt as ObjectTypeEnums,
-  Oe as PasswordInput,
+  J as ButtonComponent,
+  Z as CardComponent,
+  le as CardFooter,
+  se as CardHeader,
+  me as CheckBox,
+  Se as DatetimeComponent,
+  De as DropDown,
+  j as DropDownItem,
+  T as FormGroup,
+  Be as NumberInput,
+  L as ObjectStateEnum,
+  it as ObjectTitleCaseEnums,
+  ut as ObjectTypeEnums,
+  Pe as PasswordInput,
   w as RenderErrorMessage,
-  Fe as SwitchComponent,
-  ze as TextArea,
-  We as TextInput,
-  T as ToolTip,
-  at as default
+  Je as SwitchComponent,
+  et as TextArea,
+  nt as TextInput,
+  C as ToolTip,
+  dt as default
 };

package/dist/whelk-ui.umd.cjs

@@ -1 +1 @@
-(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.WhelkUI={},u.Vue))})(this,(function(u,e){"use strict";const k={Disable:"DISABLE",Error:"ERROR",Loading:"LOADING",LoggingIn:"LOGGING_IN",LoggingOut:"LOGGING_OUT",NoAction:"NO_ACTION",Saving:"SAVING"},x=["disabled"],I={key:1},w=e.defineComponent({__name:"ButtonComponent",props:{objectState:{type:String,default:k.NoAction,required:!1,validator:function(t){return Object.values(k).includes(t)}}},setup(t){return(l,n)=>(e.openBlock(),e.createElementBlock("button",{disabled:t.objectState!==e.unref(k).NoAction},[t.objectState===e.unref(k).NoAction?e.renderSlot(l.$slots,"default",{key:0},void 0,!0):e.createCommentVNode("",!0),t.objectState!==e.unref(k).NoAction?(e.openBlock(),e.createElementBlock("span",I,e.toDisplayString(t.objectState),1)):e.createCommentVNode("",!0)],8,x))}}),g=(t,l)=>{const n=t.__vccOpts||t;for(const[o,s]of l)n[o]=s;return n},N=g(w,[["__scopeId","data-v-3de7a432"]]),E={},D={class:"card"};function L(t,l){return e.openBlock(),e.createElementBlock("div",D,[e.renderSlot(t.$slots,"default",{},void 0,!0)])}const y=g(E,[["render",L],["__scopeId","data-v-025f3983"]]),R={class:"checkbox-component"},O=["id","name"],j=["for"],V=g(e.defineComponent({__name:"CheckBox",props:e.mergeModels({id:{type:String,required:!0},label:{type:String,required:!0}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const l=e.useModel(t,"modelValue"),n=t,o=e.computed(()=>`checkbox-${n.id}`);return(s,a)=>(e.openBlock(),e.createElementBlock("div",R,[e.withDirectives(e.createElementVNode("input",{id:o.value,name:t.label,"onUpdate:modelValue":a[0]||(a[0]=r=>l.value=r),type:"checkbox"},null,8,O),[[e.vModelCheckbox,l.value]]),e.createElementVNode("label",{for:o.value},e.toDisplayString(n.label),9,j)]))}}),[["__scopeId","data-v-39385668"]]),A={},F={class:"form-group"};function G(t,l){return e.openBlock(),e.createElementBlock("div",F,[e.renderSlot(t.$slots,"default",{},void 0,!0)])}const _=g(A,[["render",G],["__scopeId","data-v-142c8936"]]),U={},K={class:"render-error-message"};function P(t,l){return e.openBlock(),e.createElementBlock("span",K,[e.renderSlot(t.$slots,"default",{},void 0,!0)])}const b=g(U,[["render",P],["__scopeId","data-v-e384ff35"]]),z=["id"],W={key:0,class:"tooltip-title"},X={class:"tooltip-message"},H=["data-tooltip-target"],h=g(e.defineComponent({__name:"ToolTip",props:{id:{type:String,required:!0},message:{type:String,required:!0},title:{type:String,default:""}},setup(t){const l=t,n=e.computed(()=>`tooltip-${l.id}`),o=e.ref("tooltip");return(s,a)=>{const r=e.resolveComponent("Info");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{id:n.value,class:e.normalizeClass(o.value),role:"tooltip"},[l.title!==""&&l.title!==null&&l.title!==void 0?(e.openBlock(),e.createElementBlock("p",W,e.toDisplayString(l.title),1)):e.createCommentVNode("",!0),e.createElementVNode("p",X,e.toDisplayString(l.message),1)],10,z),e.createElementVNode("span",{"data-tooltip-target":n.value,type:"tooltip",onMouseenter:a[0]||(a[0]=d=>o.value="tooltip show"),onMouseleave:a[1]||(a[1]=d=>o.value="tooltip"),onFocus:a[2]||(a[2]=d=>o.value="tooltip show"),onBlur:a[3]||(a[3]=d=>o.value="tooltip"),onKeydown:a[4]||(a[4]=e.withKeys(d=>o.value="tooltip",["esc"]))},[e.createVNode(r)],40,H)],64)}}}),[["__scopeId","data-v-5121adbc"]]),J=["for"],Q={key:1,"aria-description":"Field is required"},Y=["id","name"],C=g(e.defineComponent({__name:"DatetimeComponent",props:e.mergeModels({isRequired:{type:Boolean,default:!1},label:{type:String,required:!0},tooltipMessage:{type:String,required:!1,default:""},tooltipTitle:{type:String,required:!1,default:""}},{model:{type:Date,required:!1},modelModifiers:{}}),emits:e.mergeModels(["isValid"],["update:model"]),setup(t,{emit:l}){const n=l,o=t,s=e.useModel(t,"model"),a=e.ref(!1),r=e.ref(""),d=e.computed(()=>"input-"+o.label?.toLowerCase()?.replace(" ","-"));function f(){a.value=!1,r.value="";let i=Number(s?.value?.toString().length);i=isNaN(i)?0:i,o.isRequired&&i===0&&(a.value=!0,r.value="This field is required"),n("isValid",!a.value)}return(i,m)=>(e.openBlock(),e.createBlock(_,{class:"datetime-component"},{default:e.withCtx(()=>[e.createElementVNode("label",{for:d.value},[o.tooltipMessage!==""?(e.openBlock(),e.createBlock(h,{key:0,title:t.tooltipTitle,message:t.tooltipMessage,id:d.value},null,8,["title","message","id"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.label),1),t.isRequired?(e.openBlock(),e.createElementBlock("span",Q,"*")):e.createCommentVNode("",!0)],8,J),e.withDirectives(e.createElementVNode("input",{id:d.value,type:"datetime-local",name:o.label,"onUpdate:modelValue":m[0]||(m[0]=c=>s.value=c),onKeyup:f,onFocusout:f},null,40,Y),[[e.vModelText,s.value]]),e.createVNode(b,{"error-message":r.value},null,8,["error-message"])]),_:1}))}}),[["__scopeId","data-v-905d8a98"]]),Z={class:"drop-down-items"},v=["onClick"],ee=g(e.defineComponent({__name:"DropDownItem",props:{dropDownItems:{type:Array,required:!0}},emits:["dropDownItemClicked"],setup(t,{emit:l}){const n=l;function o(s){n("dropDownItemClicked",s)}return(s,a)=>(e.openBlock(),e.createElementBlock("div",Z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.dropDownItems,r=>(e.openBlock(),e.createElementBlock("div",{class:"drop-down-item",onClick:d=>o(r.trigger),key:r.label},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.icon))),e.createTextVNode(" "+e.toDisplayString(r.label),1)],8,v))),128))]))}}),[["__scopeId","data-v-eb1af184"]]),te={class:"drop-down"},$=g(e.defineComponent({__name:"DropDown",props:{dropDownItems:{type:Array,required:!0}},emits:["dropDownItemClicked"],setup(t,{emit:l}){const n=l,o=e.ref(!1);function s(){o.value=!o.value}function a(r){n("dropDownItemClicked",r),o.value=!1}return(r,d)=>(e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("button",{type:"button",onClick:s},[e.renderSlot(r.$slots,"default",{},void 0,!0)]),e.createVNode(e.Transition,null,{default:e.withCtx(()=>[e.withDirectives(e.createVNode(ee,{onDropDownItemClicked:a,"drop-down-items":t.dropDownItems},null,8,["drop-down-items"]),[[e.vShow,o.value]])]),_:1}),e.createVNode(e.Transition,null,{default:e.withCtx(()=>[o.value?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:s,class:"drop-down-backdrop"})):e.createCommentVNode("",!0)]),_:1})]))}}),[["__scopeId","data-v-755569e8"]]),oe=["for"],le={class:"number-input-row"},ae=["aria-label","disabled"],ne=["aria-label","disabled"],re=e.defineComponent({__name:"NumberInput",props:e.mergeModels({label:{type:String,required:!0},maxValue:{type:Number,default:Number.MAX_SAFE_INTEGER},minValue:{type:Number,default:Number.MIN_SAFE_INTEGER},stepIncrement:{type:Number,default:1},tooltipMessage:{type:String,required:!1,default:""},tooltipTitle:{type:String,required:!1,default:""}},{modelValue:{type:Number,default:0},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const l=t,n=e.useModel(t,"modelValue"),o=e.ref(""),s=e.computed(()=>"input-"+l.label?.toLowerCase()?.replace(" ","-")),a=e.computed(()=>n.value>=l.maxValue),r=e.computed(()=>n.value<=l.minValue);function d(){if(o.value="",r.value){o.value="Reached Lowest Value";return}let m=Math.abs(l.minValue-n.value);m=m<Math.abs(l.stepIncrement)?m:Math.abs(l.stepIncrement);let c=n.value-m;c=c>l.maxValue?l.maxValue:c,n.value=c}function f(){if(o.value="",a.value){o.value="Reached Maxium Value";return}let m=Math.abs(l.maxValue-n.value);m=m<Math.abs(l.stepIncrement)?m:Math.abs(l.stepIncrement);let c=n.value+m;c=c<l.minValue?l.minValue:c,n.value=c}function i(m){o.value="";let p=m.target?.valueAsNumber;p===void 0&&(o.value="Model is undefined - default 0",p=0),isNaN(p)&&(o.value="Not a number - default 0",p=0),p=p>l.maxValue?l.maxValue:p,p=p<l.minValue?l.minValue:p,n.value=p}return(m,c)=>(e.openBlock(),e.createBlock(_,{class:"number-input"},{default:e.withCtx(()=>[e.createElementVNode("label",{for:s.value},[l.tooltipMessage!==""?(e.openBlock(),e.createBlock(h,{key:0,title:t.tooltipTitle,message:t.tooltipMessage,id:s.value},null,8,["title","message","id"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.label),1)],8,oe),e.createElementVNode("div",le,[e.createElementVNode("button",{type:"button",class:"negative","aria-label":`Decrement current value of ${n.value} by ${l.stepIncrement}`,disabled:r.value,onClick:d}," - ",8,ae),e.withDirectives(e.createElementVNode("input",{type:"number","aria-label":"Current value picked","aria-describedby":"helper-text-explanation","onUpdate:modelValue":c[0]||(c[0]=p=>n.value=p),onChange:c[1]||(c[1]=p=>i(p)),onKeyup:c[2]||(c[2]=p=>i(p))},null,544),[[e.vModelText,n.value]]),e.createElementVNode("button",{type:"button",class:"positive","aria-label":`Increment current value of ${n.value} by ${l.stepIncrement}`,disabled:a.value,onClick:f}," + ",8,ne)]),e.createVNode(b,{"error-message":o.value},null,8,["error-message"])]),_:1}))}}),B=g(re,[["__scopeId","data-v-06558243"]]),ie=["for"],se={key:1,"aria-description":"Field is required"},de=["id","name","placeholder"],M=g(e.defineComponent({__name:"PasswordInput",props:e.mergeModels({isRequired:{type:Boolean,default:!1},label:{type:String,required:!0},minLength:{type:Number,default:0,required:!1,validator:t=>!Number.isNaN(t)},placeholderText:{type:String,required:!1,default:""},tooltipMessage:{type:String,required:!1,default:""},tooltipTitle:{type:String,required:!1,default:""}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["isValid"],["update:modelValue"]),setup(t,{emit:l}){const n=l,o=t,s=e.useModel(t,"modelValue"),a=e.ref(!1),r=e.ref(""),d=e.computed(()=>"input-"+o.label?.toLowerCase()?.replace(" ","-"));function f(){a.value=!1,r.value="";let i=Number(s?.value?.toString().length);i=isNaN(i)?0:i,o.isRequired&&i===0&&(a.value=!0,r.value="This field is required"),o.minLength>0&&i<o.minLength&&(a.value=!0,r.value=`This field has a minimum length ${i} / ${o.minLength}`),n("isValid",!a.value)}return(i,m)=>(e.openBlock(),e.createBlock(_,{class:"text-input"},{default:e.withCtx(()=>[e.createElementVNode("label",{for:d.value},[o.tooltipMessage!==""?(e.openBlock(),e.createBlock(h,{key:0,title:t.tooltipTitle,message:t.tooltipMessage,id:d.value},null,8,["title","message","id"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.label),1),t.isRequired?(e.openBlock(),e.createElementBlock("span",se,"*")):e.createCommentVNode("",!0)],8,ie),e.withDirectives(e.createElementVNode("input",{id:d.value,type:"password",name:o.label,placeholder:o.placeholderText,"onUpdate:modelValue":m[0]||(m[0]=c=>s.value=c),onKeyup:f,onFocusout:f},null,40,de),[[e.vModelText,s.value]]),e.createVNode(b,{"error-message":r.value},null,8,["error-message"])]),_:1}))}}),[["__scopeId","data-v-d179e9e2"]]),ce=["for"],me={class:"switch-text"},q=g(e.defineComponent({__name:"SwitchComponent",props:e.mergeModels({label:{type:String,required:!0},offText:{type:String,required:!1,default:""},onText:{type:String,required:!1,default:""},tooltipMessage:{type:String,required:!1,default:""},tooltipTitle:{type:String,required:!1,default:""}},{modelValue:{type:Boolean},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const l=t,n=e.computed(()=>a.value?"switch on":"switch off"),o=e.computed(()=>"input-"+l.label?.toLowerCase()?.replace(" ","-")),s=e.computed(()=>a.value?l.onText:l.offText),a=e.useModel(t,"modelValue");function r(){a.value=!a.value}return(d,f)=>(e.openBlock(),e.createBlock(_,{class:"switch-component"},{default:e.withCtx(()=>[e.createElementVNode("label",{for:o.value},[l.tooltipMessage!==""?(e.openBlock(),e.createBlock(h,{key:0,title:t.tooltipTitle,message:t.tooltipMessage,id:o.value},null,8,["title","message","id"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.label),1)],8,ce),e.createElementVNode("div",{onClick:r,class:e.normalizeClass(n.value)},[e.createElementVNode("div",me,e.toDisplayString(s.value),1),f[0]||(f[0]=e.createElementVNode("div",{class:"switch-block"},null,-1))],2)]),_:1}))}}),[["__scopeId","data-v-f28e5f26"]]),ue=["for"],pe={key:1,"aria-description":"Field is required"},fe=["id","name","placeholder"],S=g(e.defineComponent({__name:"TextArea",props:e.mergeModels({isRequired:{type:Boolean,default:!1},label:{type:String,required:!0},minLength:{type:Number,default:0,required:!1,validator:t=>!Number.isNaN(t)},maxLength:{type:Number,default:0,required:!1,validator:t=>!Number.isNaN(t)},placeholderText:{type:String,required:!1,default:""},tooltipMessage:{type:String,required:!1,default:""},tooltipTitle:{type:String,required:!1,default:""}},{model:{type:String,required:!1,default:""},modelModifiers:{}}),emits:e.mergeModels(["isValid"],["update:model"]),setup(t,{emit:l}){const n=l,o=t,s=e.useModel(t,"model"),a=e.ref(!1),r=e.ref(""),d=e.computed(()=>"input-"+o.label?.toLowerCase()?.replace(" ","-"));function f(){a.value=!1,r.value="";let i=Number(s?.value?.toString().length);i=isNaN(i)?0:i,o.isRequired&&i===0&&(a.value=!0,r.value="This field is required"),o.minLength>0&&i<o.minLength&&(a.value=!0,r.value=`This field has a minimum length ${i} / ${o.minLength}`),o.maxLength>0&&i>o.maxLength&&(a.value=!0,r.value=`This field has a maximum length ${i} / ${o.maxLength}`),n("isValid",!a.value)}return(i,m)=>(e.openBlock(),e.createBlock(_,null,{default:e.withCtx(()=>[e.createElementVNode("label",{for:d.value},[o.tooltipMessage!==""?(e.openBlock(),e.createBlock(h,{key:0,title:t.tooltipTitle,message:t.tooltipMessage,id:d.value},null,8,["title","message","id"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.label),1),t.isRequired?(e.openBlock(),e.createElementBlock("span",pe,"*")):e.createCommentVNode("",!0)],8,ue),e.withDirectives(e.createElementVNode("textarea",{rows:"10",id:d.value,type:"text",name:o.label,placeholder:o.placeholderText,"onUpdate:modelValue":m[0]||(m[0]=c=>s.value=c),onKeyup:f,onFocusout:f},null,40,fe),[[e.vModelText,s.value]]),e.createVNode(b,{"error-message":r.value},null,8,["error-message"])]),_:1}))}}),[["__scopeId","data-v-88c9adeb"]]),ge=["for"],_e={key:1,"aria-description":"Field is required"},he=["id","name","placeholder"],T=g(e.defineComponent({__name:"TextInput",props:e.mergeModels({isRequired:{type:Boolean,default:!1},label:{type:String,required:!0},minLength:{type:Number,default:0,required:!1,validator:t=>!Number.isNaN(t)},maxLength:{type:Number,default:0,required:!1,validator:t=>!Number.isNaN(t)},placeholderText:{type:String,required:!1,default:""},tooltipMessage:{type:String,required:!1,default:""},tooltipTitle:{type:String,required:!1,default:""}},{modelValue:{required:!0},modelModifiers:{}}),emits:e.mergeModels(["isValid"],["update:modelValue"]),setup(t,{emit:l}){const n=l,o=t,s=e.useModel(t,"modelValue"),a=e.ref(!1),r=e.ref(""),d=e.computed(()=>"input-"+o.label?.toLowerCase()?.replace(" ","-"));function f(){a.value=!1,r.value="";let i=Number(s?.value?.toString().length);i=isNaN(i)?0:i,o.isRequired&&i===0&&(a.value=!0,r.value="This field is required"),o.minLength>0&&i<o.minLength&&(a.value=!0,r.value=`This field has a minimum length ${i} / ${o.minLength}`),o.maxLength>0&&i>o.maxLength&&(a.value=!0,r.value=`This field has a maximum length ${i} / ${o.maxLength}`),n("isValid",!a.value)}return(i,m)=>(e.openBlock(),e.createBlock(_,{class:"text-input"},{default:e.withCtx(()=>[e.createElementVNode("label",{for:d.value},[o.tooltipMessage!==""?(e.openBlock(),e.createBlock(h,{key:0,title:t.tooltipTitle,message:t.tooltipMessage,id:d.value},null,8,["title","message","id"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.label),1),t.isRequired?(e.openBlock(),e.createElementBlock("span",_e,"*")):e.createCommentVNode("",!0)],8,ge),e.withDirectives(e.createElementVNode("input",{id:d.value,type:"text",name:o.label,placeholder:o.placeholderText,"onUpdate:modelValue":m[0]||(m[0]=c=>s.value=c),onKeyup:f,onFocusout:f},null,40,he),[[e.vModelText,s.value]]),e.createVNode(b,{"error-message":r.value},null,8,["error-message"])]),_:1}))}}),[["__scopeId","data-v-354652ea"]]),be=Object.freeze(Object.defineProperty({__proto__:null,ButtonComponent:N,CardComponent:y,CheckBox:V,DatetimeComponent:C,DropDown:$,FormGroup:_,NumberInput:B,PasswordInput:M,RenderErrorMessage:b,SwitchComponent:q,TextArea:S,TextInput:T,ToolTip:h},Symbol.toStringTag,{value:"Module"})),ke={customer:"Customer",group:"Group",kanban_board:"Kanban Board",kanban_card:"Kanban Card",organisation:"Organisation",request_for_change:"Request For Change",requirement:"Requirement",requirement_item:"Requirement Item",project:"Project",task:"Task",user:"User"},Ne={customer:"customer",kanban_board:"kanban_board",kanban_card:"kanban_card",organisation:"organisation",request_for_change:"request_for_change",requirement:"requirement",requirement_item:"requirement_item",project:"project",task:"task"},ye={install(t){Object.entries(be).forEach(([l,n])=>{t.component(l,n)})}};u.ButtonComponent=N,u.CardComponent=y,u.CheckBox=V,u.DatetimeComponent=C,u.DropDown=$,u.FormGroup=_,u.NumberInput=B,u.ObjectStateEnum=k,u.ObjectTitleCaseEnums=ke,u.ObjectTypeEnums=Ne,u.PasswordInput=M,u.RenderErrorMessage=b,u.SwitchComponent=q,u.TextArea=S,u.TextInput=T,u.ToolTip=h,u.default=ye,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d.WhelkUI={},d.Vue))})(this,(function(d,e){"use strict";const k={Disable:"DISABLE",Error:"ERROR",Loading:"LOADING",LoggingIn:"LOGGING_IN",LoggingOut:"LOGGING_OUT",NoAction:"NO_ACTION",Saving:"SAVING"},E=["disabled"],D={key:1},L=e.defineComponent({__name:"ButtonComponent",props:{objectState:{type:String,default:k.NoAction,required:!1,validator:function(t){return Object.values(k).includes(t)}}},setup(t){return(l,n)=>(e.openBlock(),e.createElementBlock("button",{disabled:t.objectState!==e.unref(k).NoAction},[t.objectState===e.unref(k).NoAction?e.renderSlot(l.$slots,"default",{key:0},void 0,!0):e.createCommentVNode("",!0),t.objectState!==e.unref(k).NoAction?(e.openBlock(),e.createElementBlock("span",D,e.toDisplayString(t.objectState),1)):e.createCommentVNode("",!0)],8,E))}}),f=(t,l)=>{const n=t.__vccOpts||t;for(const[o,s]of l)n[o]=s;return n},y=f(L,[["__scopeId","data-v-3de7a432"]]),R={},O={class:"card"};function j(t,l){return e.openBlock(),e.createElementBlock("div",O,[e.renderSlot(t.$slots,"default",{},void 0,!0)])}const V=f(R,[["render",j],["__scopeId","data-v-025f3983"]]),A={},F={class:"card-footer"};function G(t,l){return e.openBlock(),e.createElementBlock("div",F,[e.renderSlot(t.$slots,"default",{},void 0,!0)])}const C=f(A,[["render",G],["__scopeId","data-v-86222ad6"]]),U={},K={class:"card-header"};function P(t,l){return e.openBlock(),e.createElementBlock("div",K,[e.renderSlot(t.$slots,"default",{},void 0,!0)])}const $=f(U,[["render",P],["__scopeId","data-v-9e7cf920"]]),z={class:"checkbox-component"},H=["id","name"],W=["for"],B=f(e.defineComponent({__name:"CheckBox",props:e.mergeModels({id:{type:String,required:!0},label:{type:String,required:!0}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const l=e.useModel(t,"modelValue"),n=t,o=e.computed(()=>`checkbox-${n.id}`);return(s,a)=>(e.openBlock(),e.createElementBlock("div",z,[e.withDirectives(e.createElementVNode("input",{id:o.value,name:t.label,"onUpdate:modelValue":a[0]||(a[0]=r=>l.value=r),type:"checkbox"},null,8,H),[[e.vModelCheckbox,l.value]]),e.createElementVNode("label",{for:o.value},e.toDisplayString(n.label),9,W)]))}}),[["__scopeId","data-v-39385668"]]),X={},J={class:"form-group"};function Q(t,l){return e.openBlock(),e.createElementBlock("div",J,[e.renderSlot(t.$slots,"default",{},void 0,!0)])}const _=f(X,[["render",Q],["__scopeId","data-v-142c8936"]]),Y={},Z={class:"render-error-message"};function v(t,l){return e.openBlock(),e.createElementBlock("span",Z,[e.renderSlot(t.$slots,"default",{},void 0,!0)])}const b=f(Y,[["render",v],["__scopeId","data-v-e384ff35"]]),ee=["id"],te={key:0,class:"tooltip-title"},oe={class:"tooltip-message"},le=["data-tooltip-target"],h=f(e.defineComponent({__name:"ToolTip",props:{id:{type:String,required:!0},message:{type:String,required:!0},title:{type:String,default:""}},setup(t){const l=t,n=e.computed(()=>`tooltip-${l.id}`),o=e.ref("tooltip");return(s,a)=>{const r=e.resolveComponent("Info");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{id:n.value,class:e.normalizeClass(o.value),role:"tooltip"},[l.title!==""&&l.title!==null&&l.title!==void 0?(e.openBlock(),e.createElementBlock("p",te,e.toDisplayString(l.title),1)):e.createCommentVNode("",!0),e.createElementVNode("p",oe,e.toDisplayString(l.message),1)],10,ee),e.createElementVNode("span",{"data-tooltip-target":n.value,type:"tooltip",onMouseenter:a[0]||(a[0]=c=>o.value="tooltip show"),onMouseleave:a[1]||(a[1]=c=>o.value="tooltip"),onFocus:a[2]||(a[2]=c=>o.value="tooltip show"),onBlur:a[3]||(a[3]=c=>o.value="tooltip"),onKeydown:a[4]||(a[4]=e.withKeys(c=>o.value="tooltip",["esc"]))},[e.createVNode(r)],40,le)],64)}}}),[["__scopeId","data-v-5121adbc"]]),ae=["for"],ne={key:1,"aria-description":"Field is required"},re=["id","name"],M=f(e.defineComponent({__name:"DatetimeComponent",props:e.mergeModels({isRequired:{type:Boolean,default:!1},label:{type:String,required:!0},tooltipMessage:{type:String,required:!1,default:""},tooltipTitle:{type:String,required:!1,default:""}},{model:{type:Date,required:!1},modelModifiers:{}}),emits:e.mergeModels(["isValid"],["update:model"]),setup(t,{emit:l}){const n=l,o=t,s=e.useModel(t,"model"),a=e.ref(!1),r=e.ref(""),c=e.computed(()=>"input-"+o.label?.toLowerCase()?.replace(" ","-"));function g(){a.value=!1,r.value="";let i=Number(s?.value?.toString().length);i=isNaN(i)?0:i,o.isRequired&&i===0&&(a.value=!0,r.value="This field is required"),n("isValid",!a.value)}return(i,u)=>(e.openBlock(),e.createBlock(_,{class:"datetime-component"},{default:e.withCtx(()=>[e.createElementVNode("label",{for:c.value},[o.tooltipMessage!==""?(e.openBlock(),e.createBlock(h,{key:0,title:t.tooltipTitle,message:t.tooltipMessage,id:c.value},null,8,["title","message","id"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.label),1),t.isRequired?(e.openBlock(),e.createElementBlock("span",ne,"*")):e.createCommentVNode("",!0)],8,ae),e.withDirectives(e.createElementVNode("input",{id:c.value,type:"datetime-local",name:o.label,"onUpdate:modelValue":u[0]||(u[0]=m=>s.value=m),onKeyup:g,onFocusout:g},null,40,re),[[e.vModelText,s.value]]),e.createVNode(b,{"error-message":r.value},null,8,["error-message"])]),_:1}))}}),[["__scopeId","data-v-905d8a98"]]),ie={class:"drop-down-items"},se=["onClick"],N=f(e.defineComponent({__name:"DropDownItem",props:{dropDownItems:{type:Array,required:!0}},emits:["dropDownItemClicked"],setup(t,{emit:l}){const n=l;function o(s){n("dropDownItemClicked",s)}return(s,a)=>(e.openBlock(),e.createElementBlock("div",ie,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.dropDownItems,r=>(e.openBlock(),e.createElementBlock("div",{class:"drop-down-item",onClick:c=>o(r.trigger),key:r.label},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.icon))),e.createTextVNode(" "+e.toDisplayString(r.label),1)],8,se))),128))]))}}),[["__scopeId","data-v-7a71b3ac"]]),de={class:"drop-down"},S=f(e.defineComponent({__name:"DropDown",props:{dropDownItems:{type:Array,required:!0}},emits:["dropDownItemClicked"],setup(t,{emit:l}){const n=l,o=e.ref(!1);function s(){o.value=!o.value}function a(r){n("dropDownItemClicked",r),o.value=!1}return(r,c)=>(e.openBlock(),e.createElementBlock("div",de,[e.createElementVNode("button",{type:"button",onClick:s},[e.renderSlot(r.$slots,"default",{},void 0,!0)]),e.createVNode(e.Transition,null,{default:e.withCtx(()=>[e.withDirectives(e.createVNode(N,{onDropDownItemClicked:a,"drop-down-items":t.dropDownItems},null,8,["drop-down-items"]),[[e.vShow,o.value]])]),_:1}),e.createVNode(e.Transition,null,{default:e.withCtx(()=>[o.value?(e.openBlock(),e.createElementBlock("div",{key:0,onClick:s,class:"drop-down-backdrop"})):e.createCommentVNode("",!0)]),_:1})]))}}),[["__scopeId","data-v-539fd54a"]]),ce=["for"],me={class:"number-input-row"},ue=["aria-label","disabled"],pe=["aria-label","disabled"],fe=e.defineComponent({__name:"NumberInput",props:e.mergeModels({label:{type:String,required:!0},maxValue:{type:Number,default:Number.MAX_SAFE_INTEGER},minValue:{type:Number,default:Number.MIN_SAFE_INTEGER},stepIncrement:{type:Number,default:1},tooltipMessage:{type:String,required:!1,default:""},tooltipTitle:{type:String,required:!1,default:""}},{modelValue:{type:Number,default:0},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const l=t,n=e.useModel(t,"modelValue"),o=e.ref(""),s=e.computed(()=>"input-"+l.label?.toLowerCase()?.replace(" ","-")),a=e.computed(()=>n.value>=l.maxValue),r=e.computed(()=>n.value<=l.minValue);function c(){if(o.value="",r.value){o.value="Reached Lowest Value";return}let u=Math.abs(l.minValue-n.value);u=u<Math.abs(l.stepIncrement)?u:Math.abs(l.stepIncrement);let m=n.value-u;m=m>l.maxValue?l.maxValue:m,n.value=m}function g(){if(o.value="",a.value){o.value="Reached Maxium Value";return}let u=Math.abs(l.maxValue-n.value);u=u<Math.abs(l.stepIncrement)?u:Math.abs(l.stepIncrement);let m=n.value+u;m=m<l.minValue?l.minValue:m,n.value=m}function i(u){o.value="";let p=u.target?.valueAsNumber;p===void 0&&(o.value="Model is undefined - default 0",p=0),isNaN(p)&&(o.value="Not a number - default 0",p=0),p=p>l.maxValue?l.maxValue:p,p=p<l.minValue?l.minValue:p,n.value=p}return(u,m)=>(e.openBlock(),e.createBlock(_,{class:"number-input"},{default:e.withCtx(()=>[e.createElementVNode("label",{for:s.value},[l.tooltipMessage!==""?(e.openBlock(),e.createBlock(h,{key:0,title:t.tooltipTitle,message:t.tooltipMessage,id:s.value},null,8,["title","message","id"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.label),1)],8,ce),e.createElementVNode("div",me,[e.createElementVNode("button",{type:"button",class:"negative","aria-label":`Decrement current value of ${n.value} by ${l.stepIncrement}`,disabled:r.value,onClick:c}," - ",8,ue),e.withDirectives(e.createElementVNode("input",{type:"number","aria-label":"Current value picked","aria-describedby":"helper-text-explanation","onUpdate:modelValue":m[0]||(m[0]=p=>n.value=p),onChange:m[1]||(m[1]=p=>i(p)),onKeyup:m[2]||(m[2]=p=>i(p))},null,544),[[e.vModelText,n.value]]),e.createElementVNode("button",{type:"button",class:"positive","aria-label":`Increment current value of ${n.value} by ${l.stepIncrement}`,disabled:a.value,onClick:g}," + ",8,pe)]),e.createVNode(b,{"error-message":o.value},null,8,["error-message"])]),_:1}))}}),q=f(fe,[["__scopeId","data-v-06558243"]]),ge=["for"],_e={key:1,"aria-description":"Field is required"},he=["id","name","placeholder"],I=f(e.defineComponent({__name:"PasswordInput",props:e.mergeModels({isRequired:{type:Boolean,default:!1},label:{type:String,required:!0},minLength:{type:Number,default:0,required:!1,validator:t=>!Number.isNaN(t)},placeholderText:{type:String,required:!1,default:""},tooltipMessage:{type:String,required:!1,default:""},tooltipTitle:{type:String,required:!1,default:""}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["isValid"],["update:modelValue"]),setup(t,{emit:l}){const n=l,o=t,s=e.useModel(t,"modelValue"),a=e.ref(!1),r=e.ref(""),c=e.computed(()=>"input-"+o.label?.toLowerCase()?.replace(" ","-"));function g(){a.value=!1,r.value="";let i=Number(s?.value?.toString().length);i=isNaN(i)?0:i,o.isRequired&&i===0&&(a.value=!0,r.value="This field is required"),o.minLength>0&&i<o.minLength&&(a.value=!0,r.value=`This field has a minimum length ${i} / ${o.minLength}`),n("isValid",!a.value)}return(i,u)=>(e.openBlock(),e.createBlock(_,{class:"text-input"},{default:e.withCtx(()=>[e.createElementVNode("label",{for:c.value},[o.tooltipMessage!==""?(e.openBlock(),e.createBlock(h,{key:0,title:t.tooltipTitle,message:t.tooltipMessage,id:c.value},null,8,["title","message","id"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.label),1),t.isRequired?(e.openBlock(),e.createElementBlock("span",_e,"*")):e.createCommentVNode("",!0)],8,ge),e.withDirectives(e.createElementVNode("input",{id:c.value,type:"password",name:o.label,placeholder:o.placeholderText,"onUpdate:modelValue":u[0]||(u[0]=m=>s.value=m),onKeyup:g,onFocusout:g},null,40,he),[[e.vModelText,s.value]]),e.createVNode(b,{"error-message":r.value},null,8,["error-message"])]),_:1}))}}),[["__scopeId","data-v-d179e9e2"]]),be=["for"],ke={class:"switch-text"},T=f(e.defineComponent({__name:"SwitchComponent",props:e.mergeModels({label:{type:String,required:!0},offText:{type:String,required:!1,default:""},onText:{type:String,required:!1,default:""},tooltipMessage:{type:String,required:!1,default:""},tooltipTitle:{type:String,required:!1,default:""}},{modelValue:{type:Boolean},modelModifiers:{}}),emits:["update:modelValue"],setup(t){const l=t,n=e.computed(()=>a.value?"switch on":"switch off"),o=e.computed(()=>"input-"+l.label?.toLowerCase()?.replace(" ","-")),s=e.computed(()=>a.value?l.onText:l.offText),a=e.useModel(t,"modelValue");function r(){a.value=!a.value}return(c,g)=>(e.openBlock(),e.createBlock(_,{class:"switch-component"},{default:e.withCtx(()=>[e.createElementVNode("label",{for:o.value},[l.tooltipMessage!==""?(e.openBlock(),e.createBlock(h,{key:0,title:t.tooltipTitle,message:t.tooltipMessage,id:o.value},null,8,["title","message","id"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.label),1)],8,be),e.createElementVNode("div",{onClick:r,class:e.normalizeClass(n.value)},[e.createElementVNode("div",ke,e.toDisplayString(s.value),1),g[0]||(g[0]=e.createElementVNode("div",{class:"switch-block"},null,-1))],2)]),_:1}))}}),[["__scopeId","data-v-f28e5f26"]]),Ne=["for"],ye={key:1,"aria-description":"Field is required"},Ve=["id","name","placeholder"],w=f(e.defineComponent({__name:"TextArea",props:e.mergeModels({isRequired:{type:Boolean,default:!1},label:{type:String,required:!0},minLength:{type:Number,default:0,required:!1,validator:t=>!Number.isNaN(t)},maxLength:{type:Number,default:0,required:!1,validator:t=>!Number.isNaN(t)},placeholderText:{type:String,required:!1,default:""},tooltipMessage:{type:String,required:!1,default:""},tooltipTitle:{type:String,required:!1,default:""}},{model:{type:String,required:!1,default:""},modelModifiers:{}}),emits:e.mergeModels(["isValid"],["update:model"]),setup(t,{emit:l}){const n=l,o=t,s=e.useModel(t,"model"),a=e.ref(!1),r=e.ref(""),c=e.computed(()=>"input-"+o.label?.toLowerCase()?.replace(" ","-"));function g(){a.value=!1,r.value="";let i=Number(s?.value?.toString().length);i=isNaN(i)?0:i,o.isRequired&&i===0&&(a.value=!0,r.value="This field is required"),o.minLength>0&&i<o.minLength&&(a.value=!0,r.value=`This field has a minimum length ${i} / ${o.minLength}`),o.maxLength>0&&i>o.maxLength&&(a.value=!0,r.value=`This field has a maximum length ${i} / ${o.maxLength}`),n("isValid",!a.value)}return(i,u)=>(e.openBlock(),e.createBlock(_,null,{default:e.withCtx(()=>[e.createElementVNode("label",{for:c.value},[o.tooltipMessage!==""?(e.openBlock(),e.createBlock(h,{key:0,title:t.tooltipTitle,message:t.tooltipMessage,id:c.value},null,8,["title","message","id"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.label),1),t.isRequired?(e.openBlock(),e.createElementBlock("span",ye,"*")):e.createCommentVNode("",!0)],8,Ne),e.withDirectives(e.createElementVNode("textarea",{rows:"10",id:c.value,type:"text",name:o.label,placeholder:o.placeholderText,"onUpdate:modelValue":u[0]||(u[0]=m=>s.value=m),onKeyup:g,onFocusout:g},null,40,Ve),[[e.vModelText,s.value]]),e.createVNode(b,{"error-message":r.value},null,8,["error-message"])]),_:1}))}}),[["__scopeId","data-v-88c9adeb"]]),Ce=["for"],$e={key:1,"aria-description":"Field is required"},Be=["id","name","placeholder"],x=f(e.defineComponent({__name:"TextInput",props:e.mergeModels({isRequired:{type:Boolean,default:!1},label:{type:String,required:!0},minLength:{type:Number,default:0,required:!1,validator:t=>!Number.isNaN(t)},maxLength:{type:Number,default:0,required:!1,validator:t=>!Number.isNaN(t)},placeholderText:{type:String,required:!1,default:""},tooltipMessage:{type:String,required:!1,default:""},tooltipTitle:{type:String,required:!1,default:""}},{modelValue:{required:!0},modelModifiers:{}}),emits:e.mergeModels(["isValid"],["update:modelValue"]),setup(t,{emit:l}){const n=l,o=t,s=e.useModel(t,"modelValue"),a=e.ref(!1),r=e.ref(""),c=e.computed(()=>"input-"+o.label?.toLowerCase()?.replace(" ","-"));function g(){a.value=!1,r.value="";let i=Number(s?.value?.toString().length);i=isNaN(i)?0:i,o.isRequired&&i===0&&(a.value=!0,r.value="This field is required"),o.minLength>0&&i<o.minLength&&(a.value=!0,r.value=`This field has a minimum length ${i} / ${o.minLength}`),o.maxLength>0&&i>o.maxLength&&(a.value=!0,r.value=`This field has a maximum length ${i} / ${o.maxLength}`),n("isValid",!a.value)}return(i,u)=>(e.openBlock(),e.createBlock(_,{class:"text-input"},{default:e.withCtx(()=>[e.createElementVNode("label",{for:c.value},[o.tooltipMessage!==""?(e.openBlock(),e.createBlock(h,{key:0,title:t.tooltipTitle,message:t.tooltipMessage,id:c.value},null,8,["title","message","id"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.label),1),t.isRequired?(e.openBlock(),e.createElementBlock("span",$e,"*")):e.createCommentVNode("",!0)],8,Ce),e.withDirectives(e.createElementVNode("input",{id:c.value,type:"text",name:o.label,placeholder:o.placeholderText,"onUpdate:modelValue":u[0]||(u[0]=m=>s.value=m),onKeyup:g,onFocusout:g},null,40,Be),[[e.vModelText,s.value]]),e.createVNode(b,{"error-message":r.value},null,8,["error-message"])]),_:1}))}}),[["__scopeId","data-v-354652ea"]]),Me=Object.freeze(Object.defineProperty({__proto__:null,ButtonComponent:y,CardComponent:V,CardFooter:C,CardHeader:$,CheckBox:B,DatetimeComponent:M,DropDown:S,DropDownItem:N,FormGroup:_,NumberInput:q,PasswordInput:I,RenderErrorMessage:b,SwitchComponent:T,TextArea:w,TextInput:x,ToolTip:h},Symbol.toStringTag,{value:"Module"})),Se={customer:"Customer",group:"Group",kanban_board:"Kanban Board",kanban_card:"Kanban Card",organisation:"Organisation",request_for_change:"Request For Change",requirement:"Requirement",requirement_item:"Requirement Item",project:"Project",task:"Task",user:"User"},qe={customer:"customer",kanban_board:"kanban_board",kanban_card:"kanban_card",organisation:"organisation",request_for_change:"request_for_change",requirement:"requirement",requirement_item:"requirement_item",project:"project",task:"task"},Ie={install(t){Object.entries(Me).forEach(([l,n])=>{t.component(l,n)})}};d.ButtonComponent=y,d.CardComponent=V,d.CardFooter=C,d.CardHeader=$,d.CheckBox=B,d.DatetimeComponent=M,d.DropDown=S,d.DropDownItem=N,d.FormGroup=_,d.NumberInput=q,d.ObjectStateEnum=k,d.ObjectTitleCaseEnums=Se,d.ObjectTypeEnums=qe,d.PasswordInput=I,d.RenderErrorMessage=b,d.SwitchComponent=T,d.TextArea=w,d.TextInput=x,d.ToolTip=h,d.default=Ie,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -10,7 +10,7 @@
   "author": "Robotichead",
   "license": "MIT",
   "private": false,
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "main": "./dist/whelk-ui.umd.cjs",
   "module": "./dist/whelk-ui.js",