whelk-ui 0.0.9 → 0.0.10

package/dist/index.d.ts

@@ -8,21 +8,30 @@ import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
 declare const __VLS_component: DefineComponent<ExtractPropTypes<{
-    objectState: {
-        type: StringConstructor;
-        default: "NO_ACTION";
+    isActionRunning: {
+        type: BooleanConstructor;
+        default: boolean;
+        required: false;
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
         required: false;
-        validator: (value: string) => boolean;
     };
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
-    objectState: {
-        type: StringConstructor;
-        default: "NO_ACTION";
+    isActionRunning: {
+        type: BooleanConstructor;
+        default: boolean;
+        required: false;
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
         required: false;
-        validator: (value: string) => boolean;
     };
 }>> & Readonly<{}>, {
-    objectState: string;
+    isActionRunning: boolean;
+    isDisabled: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLButtonElement>;
 
 declare const __VLS_component_2: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
@@ -55,6 +64,7 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
+        'action-state'?(_: {}): any;
     };
     refs: {};
     rootEl: HTMLButtonElement;

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)}.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%)}
+.wlk-button-component[data-v-ff32fdfb]{padding:.5rem 1rem;border:var(--wlk-border-color);border-radius:var(--wlk-border-radius);border-width:var(--wlk-border-width);border-style:var(--wlk-border-style);color:var(--wlk-text)}.wlk-button-component[data-v-ff32fdfb]:disabled{color:color-mix(in srgb,var(--wlk-text),#0000 var(--wlk-text-opacity))}.wlk-button-component.compact[data-v-ff32fdfb]{padding:.25rem .125rem;font-size:.75rem;line-height:1rem}.wlk-button-component.tiny[data-v-ff32fdfb]{padding:.125rem 0;font-size:.75rem;line-height:.75rem}.wlk-button-component.primary[data-v-ff32fdfb]{background-color:var(--wlk-primary);border-color:var(--wlk-primary)}.wlk-button-component.primary:hover[data-v-ff32fdfb]:enabled{background-color:var(--wlk-primary-hover)}.wlk-button-component.primary[data-v-ff32fdfb]:disabled{background-color:color-mix(in srgb,var(--wlk-primary),#0000 var(--wlk-text-opacity))}.wlk-button-component.secondary[data-v-ff32fdfb]{background-color:var(--wlk-secondary);border-color:var(--wlk-secondary)}.wlk-button-component.secondary:hover[data-v-ff32fdfb]:enabled{background-color:var(--wlk-secondary-hover)}.wlk-button-component.secondary[data-v-ff32fdfb]:disabled{background-color:color-mix(in srgb,var(--wlk-secondary),#0000 var(--wlk-text-opacity))}.wlk-button-component.danger[data-v-ff32fdfb]{background-color:var(--wlk-danger);border-color:var(--wlk-danger)}.wlk-button-component.danger:hover[data-v-ff32fdfb]:enabled{background-color:var(--wlk-danger-hover)}.wlk-button-component.danger[data-v-ff32fdfb]:disabled{background-color:color-mix(in srgb,var(--wlk-danger),#0000 var(--wlk-text-opacity))}.wlk-button-component.warning[data-v-ff32fdfb]{background-color:var(--wlk-warning);border-color:var(--wlk-warning)}.wlk-button-component.warning:hover[data-v-ff32fdfb]:enabled{background-color:var(--wlk-warning-hover)}.wlk-button-component.warning[data-v-ff32fdfb]:disabled{background-color:color-mix(in srgb,var(--wlk-warning),#0000 var(--wlk-text-opacity))}.wlk-button-component.success[data-v-ff32fdfb]{background-color:var(--wlk-success);border-color:var(--wlk-success)}.wlk-button-component.success:hover[data-v-ff32fdfb]:enabled{background-color:var(--wlk-success-hover)}.wlk-button-component.success[data-v-ff32fdfb]:disabled{background-color:color-mix(in srgb,var(--wlk-success),#0000 var(--wlk-text-opacity))}.wlk-button-component.info[data-v-ff32fdfb]{background-color:var(--wlk-info);border-color:var(--wlk-info)}.wlk-button-component.info:hover[data-v-ff32fdfb]:enabled{background-color:var(--wlk-info-hover)}.wlk-button-component.info[data-v-ff32fdfb]:disabled{background-color:color-mix(in srgb,var(--wlk-info),#0000 var(--wlk-text-opacity))}.wlk-card-component[data-v-74467f04]{border-radius:var(--wlk-border-radius);background-color:var(--wlk-bg-light)}.wlk-card-footer[data-v-d1e72c62]{padding:var(--wlk-card-footer-top-padding) var(--wlk-card-footer-right-padding) var(--wlk-card-footer-bottom-padding) var(--wlk-card-footer-left-padding)}.wlk-card-header[data-v-961bdb19]{border-radius:var(--wlk-border-radius)}.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-ae516306]{color:var(--wlk-text-red);font-weight:lighter;font-size:1rem;line-height:1.125rem;padding:0;margin:0}.render-error-message>svg[data-v-ae516306]{transform:translateY(.125rem)}@media(--large-screen){.render-error-message[data-v-ae516306]{font-size:.75rem}}p[data-v-ae516306]:before{content:" ";white-space:pre}.tooltip[data-v-259be5b6]{display:none;position:absolute;z-index:10;padding:.75rem .25rem;background-color:var(--wlk-bg-dark);border-color:var(--wlk-border-color-muted);border-width:var(--wlk-border-color-width);border-style:var(--wlk-border-style);border-radius:var(--wlk-border-color-radius);transform:translateY(-100%) translateY(-.5rem);max-width:75vw}.tooltip.show[data-v-259be5b6]{display:inline-block}.tooltip>.tooltip-title[data-v-259be5b6]{margin:0 0 .125rem;color:var(--wlk-text-red)}.tooltip>.tooltip-message[data-v-259be5b6]{font-weight:lighter;margin:0;color:var(--wlk-text-muted)}@media(--large-screen){.tooltip[data-v-259be5b6]{max-width:50vw}}svg[data-v-259be5b6]{width:1rem;height:1rem;color:var(--wlk-text-muted)}.datetime-component label[data-v-0431d9c6]{margin-bottom:6px}.datetime-component span[data-v-0431d9c6]{color:var(--wlk-text-red)}.datetime-component input[data-v-0431d9c6]{border-style:var(--wlk-border-style);border-width:var(--wlk-border-color-width);border-radius:var(--wlk-border-color-radius);border-color:var(--wlk-border-color);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.datetime-component input[data-v-0431d9c6]:focus{border-color:var(--wlk-secondary);border-width:2px;outline:none;padding:calc(.5rem - 1px)}.datetime-component.compact>label[data-v-0431d9c6]{font-size:1rem;line-height:1.25rem;margin-bottom:2px}@media(--large-screen){.datetime-component.compact>label[data-v-0431d9c6]{font-size:.75rem;line-height:1rem}}.datetime-component.compact>input[data-v-0431d9c6]{font-size:1.25rem;line-height:1.5rem;padding:.25rem}@media(--large-screen){.datetime-component.compact>input[data-v-0431d9c6]{font-size:1rem;line-height:1.25rem}}.drop-down-items[data-v-e1f5198c]{position:absolute;background-color:var(--wlk-bg-light);border:solid;border-width:var(--wlk-border-color-width);border-radius:var(--wlk-border-color-radius);border-color:var(--wlk-border-color-muted);z-index:20}.drop-down-items>.drop-down-item[data-v-e1f5198c]{padding:.25rem .5rem}.drop-down-items>.drop-down-item[data-v-e1f5198c]:hover{background-color:var(--wlk-bg-dark)}.drop-down-items>.drop-down-item>svg[data-v-e1f5198c]{width:.75rem;height:.75rem}.drop-down>button[data-v-e6dbee62]{border:solid;border-width:1px;border-radius:var(--wlk-border-color-radius);border-color:var(--wlk-border-color-muted);background:var(--wlk-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-e6dbee62]{width:1rem;height:1rem;transform:translateY(2px)}.drop-down .drop-down-backdrop[data-v-e6dbee62]{width:100vw;height:100dvh;z-index:5;background-color:#000000b3;position:fixed;top:0;left:0}.v-enter-active[data-v-e6dbee62],.v-leave-active[data-v-e6dbee62]{transition:opacity .5s ease}.v-enter-from[data-v-e6dbee62],.v-leave-to[data-v-e6dbee62]{opacity:0}.number-input>label[data-v-a67e88cf]{margin-bottom:6px}.number-input>.number-input-row[data-v-a67e88cf]{display:grid;grid-template-columns:3rem minmax(0,1fr) 3rem}.number-input>.number-input-row>.negative[data-v-a67e88cf]{border-radius:var(--wlk-border-color-radius) 0 0 var(--wlk-border-color-radius);border-width:var(--wlk-border-color-width) 0 var(--wlk-border-color-width) var(--wlk-border-color-width)}.number-input>.number-input-row>input[data-v-a67e88cf]{border-style:var(--wlk-border-style);border-width:var(--wlk-border-color-width);border-radius:0;border-color:var(--wlk-border-color);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.number-input>.number-input-row>input[data-v-a67e88cf]:focus{border-color:var(--wlk-secondary);border-width:2px;outline:none;padding:calc(.5rem - 1px)}.number-input>.number-input-row>.positive[data-v-a67e88cf]{border-radius:0 var(--wlk-border-color-radius) var(--wlk-border-color-radius) 0;border-width:var(--wlk-border-color-width) var(--wlk-border-color-width) var(--wlk-border-color-width) 0}.number-input.compact>label[data-v-a67e88cf]{font-size:1rem;line-height:1.25rem;margin-bottom:2px}@media(--large-screen){.number-input.compact>label[data-v-a67e88cf]{font-size:.75rem;line-height:1rem}}.number-input.compact>.number-input-row[data-v-a67e88cf]{grid-template-columns:2.5rem minmax(0,1fr) 2.5rem}.number-input.compact>.number-input-row>input[data-v-a67e88cf]{font-size:1.25rem;line-height:1.5rem;padding:.25rem}@media(--large-screen){.number-input.compact>.number-input-row>input[data-v-a67e88cf]{font-size:1rem;line-height:1.25rem}}input[data-v-a67e88cf]::-webkit-outer-spin-button,input[data-v-a67e88cf]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-a67e88cf]{-moz-appearance:textfield}.text-input>label[data-v-ebc196f2]{margin-bottom:6px}.text-input>span[data-v-ebc196f2]{color:var(--wlk-text-red)}.text-input>input[data-v-ebc196f2]{border-style:var(--wlk-border-style);border-width:var(--wlk-border-color-width);border-radius:var(--wlk-border-color-radius);border-color:var(--wlk-border-color);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.text-input>input[data-v-ebc196f2]:focus{border-color:var(--wlk-secondary);border-width:2px;outline:none;padding:calc(.5rem - 1px)}.text-input.compact>label[data-v-ebc196f2]{font-size:1rem;line-height:1.25rem;margin-bottom:2px}@media(--large-screen){.text-input.compact>label[data-v-ebc196f2]{font-size:.75rem;line-height:1rem}}.text-input.compact>input[data-v-ebc196f2]{font-size:1.25rem;line-height:1.5rem;padding:.25rem}.text-input.compact>input[data-v-ebc196f2]:focus{padding:calc(.25rem - 1px)}@media(--large-screen){.text-input.compact>input[data-v-ebc196f2]{font-size:1rem;line-height:1.25rem}}.switch-component[data-v-5b394104]{width:100%}.switch-component>.switch[data-v-5b394104]{display:grid;grid-template-columns:[on] 2rem [text] minmax(0,1fr) [off] 2rem;border-style:var(--wlk-border-style);border-width:var(--wlk-border-color-width);border-radius:var(--wlk-border-color-radius);border-color:var(--wlk-border-color);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.switch-component>.switch>.switch-block[data-v-5b394104]{width:2rem;height:2rem;background-color:#ff69b4}.switch-component>.switch>.switch-text[data-v-5b394104]{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-5b394104]{grid-area:on;background-color:var(--wlk-success)}.switch-component>.switch.off>.switch-block[data-v-5b394104]{grid-area:off;background-color:var(--wlk-info)}.switch-component.compact>label[data-v-5b394104]{font-size:1rem;line-height:1.25rem}.switch-component.compact>.switch[data-v-5b394104]{grid-template-columns:[on] 1rem [text] minmax(0,1fr) [off] 1rem}.switch-component.compact>.switch>.switch-block[data-v-5b394104]{width:1rem;height:1rem}.switch-component.compact>.switch>.switch-text[data-v-5b394104]{font-size:.75rem;line-height:1rem}label[data-v-4d8b899d]{margin-bottom:6px}span[data-v-4d8b899d]{color:var(--wlk-text-red)}textarea[data-v-4d8b899d]{border-style:var(--wlk-border-style);border-width:var(--wlk-border-color-width);border-radius:var(--wlk-border-color-radius);border-color:var(--wlk-border-color);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}textarea[data-v-4d8b899d]:focus{border-color:var(--wlk-secondary);border-width:2px;outline:none;padding:calc(.5rem - 1px)}.text-input>label[data-v-894231bc]{margin-bottom:6px}.text-input>span[data-v-894231bc]{color:var(--wlk-text-red)}.text-input>input[data-v-894231bc]{border-style:var(--wlk-border-style);border-width:var(--wlk-border-color-width);border-radius:var(--wlk-border-color-radius);border-color:var(--wlk-border-color);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.text-input>input[data-v-894231bc]:focus{border-color:var(--wlk-secondary);border-width:2px;outline:none;padding:calc(.5rem - 1px)}.text-input.compact>label[data-v-894231bc]{font-size:1rem;line-height:1.25rem;margin-bottom:2px}@media(--large-screen){.text-input.compact>label[data-v-894231bc]{font-size:.75rem;line-height:1rem}}.text-input.compact>input[data-v-894231bc]{font-size:1.25rem;line-height:1.5rem;padding:.25rem}.text-input.compact>input[data-v-894231bc]:focus{padding:calc(.25rem - 1px)}@media(--large-screen){.text-input.compact>input[data-v-894231bc]{font-size:1rem;line-height:1.25rem}}:root{--wlk-bg: hsl(26 100% 94%);--wlk-bg-dark: hsl(26 53% 89%);--wlk-bg-light: hsl(26 100% 100%);--wlk-text: hsl(16 100% 4%);--wlk-text-red: hsl(8, 93%, 43%);--wlk-text-muted: hsl(26 35% 27%);--wlk-text-opacity: 55%;--wlk-highlight: hsl(26 100% 99%);--wlk-primary: hsl(27 65% 66%);--wlk-primary-hover: hsl(27 65% 76%);--wlk-secondary: hsl(204 74% 68%);--wlk-secondary-hover: hsl(204 74% 78%);--wlk-danger: hsl(9 26% 64%);--wlk-danger-hover: hsl(9 26% 74%);--wlk-warning: hsl(52 19% 57%);--wlk-warning-hover: hsl(52 19% 67%);--wlk-success: hsl(146 17% 59%);--wlk-success-hover: hsl(146 17% 69%);--wlk-info: hsl(217 28% 65%);--wlk-info-hover: hsl(217 28% 75%)}.dark{--wlk-bg: hsl(22 76% 4%);--wlk-bg-dark: hsl(16 100% 2%);--wlk-bg-light: hsl(26 50% 8%);--wlk-text: hsl(26 100% 94%);--wlk-text-red: hsl(8, 93%, 23%);--wlk-text-muted: hsl(26 34% 68%);--wlk-highlight: hsl(26 26% 38%);--wlk-primary: hsl(32 100% 20%);--wlk-primary-hover: hsl(32 100% 10%);--wlk-secondary: hsl(198 100% 20%);--wlk-secondary-hover: hsl(198 100% 10%);--wlk-danger: hsl(9 21% 41%);--wlk-danger-hover: hsl(9 21% 31%);--wlk-warning: hsl(52 23% 34%);--wlk-warning-hover: hsl(52 23% 24%);--wlk-success: hsl(147 19% 36%);--wlk-success-hover: hsl(147 19% 26%);--wlk-info: hsl(217 22% 41%);--wlk-info-hover: hsl(217 22% 31%)}:root{--wlk-border-color: hsl(26 21% 49%);--wlk-border-top-color: var(--wlk-border-color);--wlk-border-right-color: var(--wlk-border-color);--wlk-border-bottom-color: var(--wlk-border-color);--wlk-border-left-color: var(--wlk-border-color);--wlk-border-color-muted: hsl(26 27% 61%);--wlk-border-top-color-muted: var(--wlk-border-color-muted);--wlk-border-right-color-muted: var(--wlk-border-color-muted);--wlk-border-bottom-color-muted: var(--wlk-border-color-muted);--wlk-border-left-color-muted: var(--wlk-border-color-muted);--wlk-border-radius: 4rem;--wlk-border-top-left-radius: var(--wlk-border-radius);--wlk-border-top-right-radius: var(--wlk-border-radius);--wlk-border-bottom-left-radius: var(--wlk-border-radius);--wlk-border-bottom-right-radius: var(--wlk-border-radius);--wlk-border-style: solid;--wlk-border-top-style: var(--wlk-border-style);--wlk-border-right-style: var(--wlk-border-style);--wlk-border-bottom-style: var(--wlk-border-style);--wlk-border-left-style: var(--wlk-border-style);--wlk-border-width: .063rem;--wlk-border-top-width: var(--wlk-border-width);--wlk-border-right-width: var(--wlk-border-width);--wlk-border-bottom-width: var(--wlk-border-width);--wlk-border-left-width: var(--wlk-border-width)}

package/dist/whelk-ui.js

@@ -1,56 +1,57 @@
-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",
-  LoggingIn: "LOGGING_IN",
-  LoggingOut: "LOGGING_OUT",
-  NoAction: "NO_ACTION",
-  Saving: "SAVING"
-}, z = ["disabled"], H = { key: 1 }, X = /* @__PURE__ */ I({
+import { defineComponent as I, computed as b, openBlock as i, createElementBlock as p, renderSlot as N, createTextVNode as x, createCommentVNode as _, useModel as w, withDirectives as M, createElementVNode as m, vModelCheckbox as B, toDisplayString as y, mergeModels as $, ref as q, resolveComponent as O, Fragment as R, normalizeClass as E, withKeys as F, createVNode as k, createBlock as h, withCtx as V, vModelText as L, renderList as G, resolveDynamicComponent as j, Transition as D, vShow as U } from "vue";
+const K = ["disabled"], P = /* @__PURE__ */ I({
   __name: "ButtonComponent",
   props: {
-    objectState: {
-      type: String,
-      default: L.NoAction,
-      required: !1,
-      validator: function(e) {
-        return Object.values(L).includes(e);
-      }
+    isActionRunning: {
+      type: Boolean,
+      default: !1,
+      required: !1
+    },
+    isDisabled: {
+      type: Boolean,
+      default: !1,
+      required: !1
     }
   },
   setup(e) {
-    return (a, o) => (s(), p("button", {
-      disabled: e.objectState !== R(L).NoAction
+    const a = e, o = b(() => a.isDisabled || a.isActionRunning);
+    return (t, r) => (i(), p("button", {
+      class: "wlk-button-component",
+      role: "button",
+      disabled: o.value
     }, [
-      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));
+      e.isActionRunning ? _("", !0) : N(t.$slots, "default", { key: 0 }, () => [
+        r[0] || (r[0] = x("Submit", -1))
+      ], !0),
+      e.isActionRunning ? N(t.$slots, "action-state", { key: 1 }, () => [
+        r[1] || (r[1] = x("Updating", -1))
+      ], !0) : _("", !0)
+    ], 8, K));
   }
 }), g = (e, a) => {
   const o = e.__vccOpts || e;
-  for (const [t, i] of a)
-    o[t] = i;
+  for (const [t, r] of a)
+    o[t] = r;
   return o;
-}, 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)
+}, z = /* @__PURE__ */ g(P, [["__scopeId", "data-v-ff32fdfb"]]), H = {}, X = { class: "wlk-card-component" };
+function J(e, a) {
+  return i(), p("div", X, [
+    N(e.$slots, "default", {}, void 0, !0)
   ]);
 }
-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 Q = /* @__PURE__ */ g(H, [["render", J], ["__scopeId", "data-v-74467f04"]]), W = {}, Y = { class: "wlk-card-footer" };
+function Z(e, a) {
+  return i(), p("div", Y, [
+    N(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 ee = /* @__PURE__ */ g(W, [["render", Z], ["__scopeId", "data-v-d1e72c62"]]), te = {}, ae = { class: "wlk-card-header" };
+function le(e, a) {
+  return i(), p("div", ae, [
+    N(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({
+const oe = /* @__PURE__ */ g(te, [["render", le], ["__scopeId", "data-v-961bdb19"]]), ne = { class: "checkbox-component" }, se = ["id", "name"], re = ["for"], ie = /* @__PURE__ */ I({
   __name: "CheckBox",
   props: /* @__PURE__ */ $({
     id: {
@@ -67,35 +68,35 @@ const se = /* @__PURE__ */ g(oe, [["render", re], ["__scopeId", "data-v-9e7cf920
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const a = V(e, "modelValue"), o = e, t = b(() => `checkbox-${o.id}`);
-    return (i, l) => (s(), p("div", ie, [
-      S(m("input", {
+    const a = w(e, "modelValue"), o = e, t = b(() => `checkbox-${o.id}`);
+    return (r, l) => (i(), p("div", ne, [
+      M(m("input", {
         id: t.value,
         name: e.label,
         "onUpdate:modelValue": l[0] || (l[0] = (n) => a.value = n),
         type: "checkbox"
-      }, null, 8, ue), [
+      }, null, 8, se), [
         [B, a.value]
       ]),
-      m("label", { for: t.value }, y(o.label), 9, de)
+      m("label", { for: t.value }, y(o.label), 9, re)
     ]));
   }
-}), 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)
+}), ue = /* @__PURE__ */ g(ie, [["__scopeId", "data-v-39385668"]]), de = {}, ce = { class: "form-group" };
+function me(e, a) {
+  return i(), p("div", ce, [
+    N(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 T = /* @__PURE__ */ g(de, [["render", me], ["__scopeId", "data-v-142c8936"]]), pe = {}, fe = { class: "render-error-message" };
+function ve(e, a) {
+  return i(), p("span", fe, [
+    N(e.$slots, "default", {}, void 0, !0)
   ]);
 }
-const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"]]), be = ["id"], ye = {
+const S = /* @__PURE__ */ g(pe, [["render", ve], ["__scopeId", "data-v-ae516306"]]), ge = ["id"], _e = {
   key: 0,
   class: "tooltip-title"
-}, $e = { class: "tooltip-message" }, qe = ["data-tooltip-target"], Ie = /* @__PURE__ */ I({
+}, be = { class: "tooltip-message" }, he = ["data-tooltip-target"], ye = /* @__PURE__ */ I({
   __name: "ToolTip",
   props: {
     id: {
@@ -113,17 +114,17 @@ const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"
   },
   setup(e) {
     const a = e, o = b(() => `tooltip-${a.id}`), t = q("tooltip");
-    return (i, l) => {
-      const n = F("Info");
-      return s(), p(O, null, [
+    return (r, l) => {
+      const n = O("Info");
+      return i(), p(R, null, [
         m("div", {
           id: o.value,
-          class: A(t.value),
+          class: E(t.value),
           role: "tooltip"
         }, [
-          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),
+          a.title !== "" && a.title !== null && a.title !== void 0 ? (i(), p("p", _e, y(a.title), 1)) : _("", !0),
+          m("p", be, y(a.message), 1)
+        ], 10, ge),
         m("span", {
           "data-tooltip-target": o.value,
           type: "tooltip",
@@ -131,17 +132,17 @@ const w = /* @__PURE__ */ g(ge, [["render", he], ["__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] = G((u) => t.value = "tooltip", ["esc"]))
+          onKeydown: l[4] || (l[4] = F((u) => t.value = "tooltip", ["esc"]))
         }, [
-          x(n)
-        ], 40, qe)
+          k(n)
+        ], 40, he)
       ], 64);
     };
   }
-}), C = /* @__PURE__ */ g(Ie, [["__scopeId", "data-v-5121adbc"]]), xe = ["for"], Ne = {
+}), C = /* @__PURE__ */ g(ye, [["__scopeId", "data-v-259be5b6"]]), $e = ["for"], qe = {
   key: 1,
   "aria-description": "Field is required"
-}, ke = ["id", "name"], Ve = /* @__PURE__ */ I({
+}, Ie = ["id", "name"], ke = /* @__PURE__ */ I({
   __name: "DatetimeComponent",
   props: /* @__PURE__ */ $({
     isRequired: {
@@ -171,40 +172,40 @@ const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"
   }),
   emits: /* @__PURE__ */ $(["isValid"], ["update:model"]),
   setup(e, { emit: a }) {
-    const o = a, t = e, i = V(e, "model"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
+    const o = a, t = e, r = w(e, "model"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(/ /g, "-"));
     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);
+      let s = Number(r?.value?.toString().length);
+      s = isNaN(s) ? 0 : s, t.isRequired && s === 0 && (l.value = !0, n.value = "This field is required"), o("isValid", !l.value);
     }
-    return (r, c) => (s(), h(T, { class: "datetime-component" }, {
-      default: N(() => [
+    return (s, c) => (i(), h(T, { class: "datetime-component" }, {
+      default: V(() => [
         m("label", { for: u.value }, [
-          t.tooltipMessage !== "" ? (s(), h(C, {
+          t.tooltipMessage !== "" ? (i(), h(C, {
             key: 0,
             title: e.tooltipTitle,
             message: e.tooltipMessage,
             id: u.value
           }, null, 8, ["title", "message", "id"])) : _("", !0),
-          M(" " + y(e.label), 1),
-          e.isRequired ? (s(), p("span", Ne, "*")) : _("", !0)
-        ], 8, xe),
-        S(m("input", {
+          x(" " + y(e.label), 1),
+          e.isRequired ? (i(), p("span", qe, "*")) : _("", !0)
+        ], 8, $e),
+        M(m("input", {
           id: u.value,
           type: "datetime-local",
           name: t.label,
-          "onUpdate:modelValue": c[0] || (c[0] = (d) => i.value = d),
+          "onUpdate:modelValue": c[0] || (c[0] = (d) => r.value = d),
           onKeyup: v,
           onFocusout: v
-        }, null, 40, ke), [
-          [D, i.value]
+        }, null, 40, Ie), [
+          [L, r.value]
         ]),
-        x(w, { "error-message": n.value }, null, 8, ["error-message"])
+        k(S, { "error-message": n.value }, null, 8, ["error-message"])
       ]),
       _: 1
     }));
   }
-}), Se = /* @__PURE__ */ g(Ve, [["__scopeId", "data-v-905d8a98"]]), Me = { class: "drop-down-items" }, Te = ["onClick"], Ce = /* @__PURE__ */ I({
+}), xe = /* @__PURE__ */ g(ke, [["__scopeId", "data-v-0431d9c6"]]), Ne = { class: "drop-down-items" }, Ve = ["onClick"], we = /* @__PURE__ */ I({
   __name: "DropDownItem",
   props: {
     dropDownItems: {
@@ -215,21 +216,21 @@ const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"
   emits: ["dropDownItemClicked"],
   setup(e, { emit: a }) {
     const o = a;
-    function t(i) {
-      o("dropDownItemClicked", i);
+    function t(r) {
+      o("dropDownItemClicked", r);
     }
-    return (i, l) => (s(), p("div", Me, [
-      (s(!0), p(O, null, K(e.dropDownItems, (n) => (s(), p("div", {
+    return (r, l) => (i(), p("div", Ne, [
+      (i(!0), p(R, null, G(e.dropDownItems, (n) => (i(), p("div", {
         class: "drop-down-item",
         onClick: (u) => t(n.trigger),
         key: n.label
       }, [
-        (s(), h(U(n.icon))),
-        M(" " + y(n.label), 1)
-      ], 8, Te))), 128))
+        (i(), h(j(n.icon))),
+        x(" " + y(n.label), 1)
+      ], 8, Ve))), 128))
     ]));
   }
-}), j = /* @__PURE__ */ g(Ce, [["__scopeId", "data-v-7a71b3ac"]]), we = { class: "drop-down" }, Le = /* @__PURE__ */ I({
+}), A = /* @__PURE__ */ g(we, [["__scopeId", "data-v-e1f5198c"]]), Me = { class: "drop-down" }, Te = /* @__PURE__ */ I({
   __name: "DropDown",
   props: {
     dropDownItems: {
@@ -240,35 +241,35 @@ const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"
   emits: ["dropDownItemClicked"],
   setup(e, { emit: a }) {
     const o = a, t = q(!1);
-    function i() {
+    function r() {
       t.value = !t.value;
     }
     function l(n) {
       o("dropDownItemClicked", n), t.value = !1;
     }
-    return (n, u) => (s(), p("div", we, [
+    return (n, u) => (i(), p("div", Me, [
       m("button", {
         type: "button",
-        onClick: i
+        onClick: r
       }, [
-        k(n.$slots, "default", {}, void 0, !0)
+        N(n.$slots, "default", {}, void 0, !0)
       ]),
-      x(E, null, {
-        default: N(() => [
-          S(x(j, {
+      k(D, null, {
+        default: V(() => [
+          M(k(A, {
             onDropDownItemClicked: l,
             "drop-down-items": e.dropDownItems
           }, null, 8, ["drop-down-items"]), [
-            [P, t.value]
+            [U, t.value]
           ])
         ]),
         _: 1
       }),
-      x(E, null, {
-        default: N(() => [
-          t.value ? (s(), p("div", {
+      k(D, null, {
+        default: V(() => [
+          t.value ? (i(), p("div", {
             key: 0,
-            onClick: i,
+            onClick: r,
             class: "drop-down-backdrop"
           })) : _("", !0)
         ]),
@@ -276,7 +277,7 @@ const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"
       })
     ]));
   }
-}), 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({
+}), Ce = /* @__PURE__ */ g(Te, [["__scopeId", "data-v-e6dbee62"]]), Se = ["for"], Le = { class: "number-input-row" }, De = ["aria-label", "disabled"], Re = ["aria-label", "disabled"], Ee = /* @__PURE__ */ I({
   __name: "NumberInput",
   props: /* @__PURE__ */ $({
     label: {
@@ -314,7 +315,7 @@ const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    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);
+    const a = e, o = w(e, "modelValue"), t = q(""), r = b(() => "input-" + a.label?.toLowerCase()?.replace(/ /g, "-")), l = b(() => o.value >= a.maxValue), n = b(() => o.value <= a.minValue);
     function u() {
       if (t.value = "", n.value) {
         t.value = "Reached Lowest Value";
@@ -335,39 +336,39 @@ const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"
       let d = o.value + c;
       d = d < a.minValue ? a.minValue : d, o.value = d;
     }
-    function r(c) {
+    function s(c) {
       t.value = "";
       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(T, { class: "number-input" }, {
-      default: N(() => [
-        m("label", { for: i.value }, [
-          a.tooltipMessage !== "" ? (s(), h(C, {
+    return (c, d) => (i(), h(T, { class: "number-input" }, {
+      default: V(() => [
+        m("label", { for: r.value }, [
+          a.tooltipMessage !== "" ? (i(), h(C, {
             key: 0,
             title: e.tooltipTitle,
             message: e.tooltipMessage,
-            id: i.value
+            id: r.value
           }, null, 8, ["title", "message", "id"])) : _("", !0),
-          M(" " + y(e.label), 1)
-        ], 8, Re),
-        m("div", Ee, [
+          x(" " + y(e.label), 1)
+        ], 8, Se),
+        m("div", Le, [
           m("button", {
             type: "button",
             class: "negative",
             "aria-label": `Decrement current value of ${o.value} by ${a.stepIncrement}`,
             disabled: n.value,
             onClick: u
-          }, " - ", 8, Oe),
-          S(m("input", {
+          }, " - ", 8, De),
+          M(m("input", {
             type: "number",
             "aria-label": "Current value picked",
             "aria-describedby": "helper-text-explanation",
             "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))
+            onChange: d[1] || (d[1] = (f) => s(f)),
+            onKeyup: d[2] || (d[2] = (f) => s(f))
           }, null, 544), [
-            [D, o.value]
+            [L, o.value]
           ]),
           m("button", {
             type: "button",
@@ -375,17 +376,17 @@ const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"
             "aria-label": `Increment current value of ${o.value} by ${a.stepIncrement}`,
             disabled: l.value,
             onClick: v
-          }, " + ", 8, Ae)
+          }, " + ", 8, Re)
         ]),
-        x(w, { "error-message": t.value }, null, 8, ["error-message"])
+        k(S, { "error-message": t.value }, null, 8, ["error-message"])
       ]),
       _: 1
     }));
   }
-}), Be = /* @__PURE__ */ g(je, [["__scopeId", "data-v-06558243"]]), Fe = ["for"], Ge = {
+}), Ae = /* @__PURE__ */ g(Ee, [["__scopeId", "data-v-a67e88cf"]]), Be = ["for"], Oe = {
   key: 1,
   "aria-description": "Field is required"
-}, Ke = ["id", "name", "placeholder"], Ue = /* @__PURE__ */ I({
+}, Fe = ["id", "name", "placeholder"], Ge = /* @__PURE__ */ I({
   __name: "PasswordInput",
   props: /* @__PURE__ */ $({
     isRequired: {
@@ -423,41 +424,41 @@ const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"
   }),
   emits: /* @__PURE__ */ $(["isValid"], ["update:modelValue"]),
   setup(e, { emit: a }) {
-    const o = a, t = e, i = V(e, "modelValue"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
+    const o = a, t = e, r = w(e, "modelValue"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(/ /g, "-"));
     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);
+      let s = Number(r?.value?.toString().length);
+      s = isNaN(s) ? 0 : s, t.isRequired && s === 0 && (l.value = !0, n.value = "This field is required"), t.minLength > 0 && s < t.minLength && (l.value = !0, n.value = `This field has a minimum length ${s} / ${t.minLength}`), o("isValid", !l.value);
     }
-    return (r, c) => (s(), h(T, { class: "text-input" }, {
-      default: N(() => [
+    return (s, c) => (i(), h(T, { class: "text-input" }, {
+      default: V(() => [
         m("label", { for: u.value }, [
-          t.tooltipMessage !== "" ? (s(), h(C, {
+          t.tooltipMessage !== "" ? (i(), h(C, {
             key: 0,
             title: e.tooltipTitle,
             message: e.tooltipMessage,
             id: u.value
           }, null, 8, ["title", "message", "id"])) : _("", !0),
-          M(" " + y(e.label), 1),
-          e.isRequired ? (s(), p("span", Ge, "*")) : _("", !0)
-        ], 8, Fe),
-        S(m("input", {
+          x(" " + y(e.label), 1),
+          e.isRequired ? (i(), p("span", Oe, "*")) : _("", !0)
+        ], 8, Be),
+        M(m("input", {
           id: u.value,
           type: "password",
           name: t.label,
           placeholder: t.placeholderText,
-          "onUpdate:modelValue": c[0] || (c[0] = (d) => i.value = d),
+          "onUpdate:modelValue": c[0] || (c[0] = (d) => r.value = d),
           onKeyup: v,
           onFocusout: v
-        }, null, 40, Ke), [
-          [D, i.value]
+        }, null, 40, Fe), [
+          [L, r.value]
         ]),
-        x(w, { "error-message": n.value }, null, 8, ["error-message"])
+        k(S, { "error-message": n.value }, null, 8, ["error-message"])
       ]),
       _: 1
     }));
   }
-}), Pe = /* @__PURE__ */ g(Ue, [["__scopeId", "data-v-d179e9e2"]]), ze = ["for"], He = { class: "switch-text" }, Xe = /* @__PURE__ */ I({
+}), je = /* @__PURE__ */ g(Ge, [["__scopeId", "data-v-ebc196f2"]]), Ue = ["for"], Ke = { class: "switch-text" }, Pe = /* @__PURE__ */ I({
   __name: "SwitchComponent",
   props: /* @__PURE__ */ $({
     label: {
@@ -492,36 +493,36 @@ const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    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");
+    const a = e, o = b(() => l.value ? "switch on" : "switch off"), t = b(() => "input-" + a.label?.toLowerCase()?.replace(/ /g, "-")), r = b(() => l.value ? a.onText : a.offText), l = w(e, "modelValue");
     function n() {
       l.value = !l.value;
     }
-    return (u, v) => (s(), h(T, { class: "switch-component" }, {
-      default: N(() => [
+    return (u, v) => (i(), h(T, { class: "switch-component" }, {
+      default: V(() => [
         m("label", { for: t.value }, [
-          a.tooltipMessage !== "" ? (s(), h(C, {
+          a.tooltipMessage !== "" ? (i(), h(C, {
             key: 0,
             title: e.tooltipTitle,
             message: e.tooltipMessage,
             id: t.value
           }, null, 8, ["title", "message", "id"])) : _("", !0),
-          M(" " + y(e.label), 1)
-        ], 8, ze),
+          x(" " + y(e.label), 1)
+        ], 8, Ue),
         m("div", {
           onClick: n,
-          class: A(o.value)
+          class: E(o.value)
         }, [
-          m("div", He, y(i.value), 1),
+          m("div", Ke, y(r.value), 1),
           v[0] || (v[0] = m("div", { class: "switch-block" }, null, -1))
         ], 2)
       ]),
       _: 1
     }));
   }
-}), Je = /* @__PURE__ */ g(Xe, [["__scopeId", "data-v-f28e5f26"]]), Qe = ["for"], We = {
+}), ze = /* @__PURE__ */ g(Pe, [["__scopeId", "data-v-5b394104"]]), He = ["for"], Xe = {
   key: 1,
   "aria-description": "Field is required"
-}, Ye = ["id", "name", "placeholder"], Ze = /* @__PURE__ */ I({
+}, Je = ["id", "name", "placeholder"], Qe = /* @__PURE__ */ I({
   __name: "TextArea",
   props: /* @__PURE__ */ $({
     isRequired: {
@@ -569,45 +570,45 @@ const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"
   }),
   emits: /* @__PURE__ */ $(["isValid"], ["update:model"]),
   setup(e, { emit: a }) {
-    const o = a, t = e, i = V(e, "model"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
+    const o = a, t = e, r = w(e, "model"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(/ /g, "-"));
     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);
+      let s = Number(r?.value?.toString().length);
+      s = isNaN(s) ? 0 : s, t.isRequired && s === 0 && (l.value = !0, n.value = "This field is required"), t.minLength > 0 && s < t.minLength && (l.value = !0, n.value = `This field has a minimum length ${s} / ${t.minLength}`), t.maxLength > 0 && s > t.maxLength && (l.value = !0, n.value = `This field has a maximum length ${s} / ${t.maxLength}`), o("isValid", !l.value);
     }
-    return (r, c) => (s(), h(T, null, {
-      default: N(() => [
+    return (s, c) => (i(), h(T, null, {
+      default: V(() => [
         m("label", { for: u.value }, [
-          t.tooltipMessage !== "" ? (s(), h(C, {
+          t.tooltipMessage !== "" ? (i(), h(C, {
             key: 0,
             title: e.tooltipTitle,
             message: e.tooltipMessage,
             id: u.value
           }, null, 8, ["title", "message", "id"])) : _("", !0),
-          M(" " + y(e.label), 1),
-          e.isRequired ? (s(), p("span", We, "*")) : _("", !0)
-        ], 8, Qe),
-        S(m("textarea", {
+          x(" " + y(e.label), 1),
+          e.isRequired ? (i(), p("span", Xe, "*")) : _("", !0)
+        ], 8, He),
+        M(m("textarea", {
           rows: "10",
           id: u.value,
           type: "text",
           name: t.label,
           placeholder: t.placeholderText,
-          "onUpdate:modelValue": c[0] || (c[0] = (d) => i.value = d),
+          "onUpdate:modelValue": c[0] || (c[0] = (d) => r.value = d),
           onKeyup: v,
           onFocusout: v
-        }, null, 40, Ye), [
-          [D, i.value]
+        }, null, 40, Je), [
+          [L, r.value]
         ]),
-        x(w, { "error-message": n.value }, null, 8, ["error-message"])
+        k(S, { "error-message": n.value }, null, 8, ["error-message"])
       ]),
       _: 1
     }));
   }
-}), et = /* @__PURE__ */ g(Ze, [["__scopeId", "data-v-88c9adeb"]]), tt = ["for"], at = {
+}), We = /* @__PURE__ */ g(Qe, [["__scopeId", "data-v-4d8b899d"]]), Ye = ["for"], Ze = {
   key: 1,
   "aria-description": "Field is required"
-}, lt = ["id", "name", "placeholder"], ot = /* @__PURE__ */ I({
+}, et = ["id", "name", "placeholder"], tt = /* @__PURE__ */ I({
   __name: "TextInput",
   props: /* @__PURE__ */ $({
     isRequired: {
@@ -651,59 +652,67 @@ const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"
   }),
   emits: /* @__PURE__ */ $(["isValid"], ["update:modelValue"]),
   setup(e, { emit: a }) {
-    const o = a, t = e, i = V(e, "modelValue"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
+    const o = a, t = e, r = w(e, "modelValue"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(/ /g, "-"));
     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);
+      let s = Number(r?.value?.toString().length);
+      s = isNaN(s) ? 0 : s, t.isRequired && s === 0 && (l.value = !0, n.value = "This field is required"), t.minLength > 0 && s < t.minLength && (l.value = !0, n.value = `This field has a minimum length ${s} / ${t.minLength}`), t.maxLength > 0 && s > t.maxLength && (l.value = !0, n.value = `This field has a maximum length ${s} / ${t.maxLength}`), o("isValid", !l.value);
     }
-    return (r, c) => (s(), h(T, { class: "text-input" }, {
-      default: N(() => [
+    return (s, c) => (i(), h(T, { class: "text-input" }, {
+      default: V(() => [
         m("label", { for: u.value }, [
-          t.tooltipMessage !== "" ? (s(), h(C, {
+          t.tooltipMessage !== "" ? (i(), h(C, {
             key: 0,
             title: e.tooltipTitle,
             message: e.tooltipMessage,
             id: u.value
           }, null, 8, ["title", "message", "id"])) : _("", !0),
-          M(" " + y(e.label), 1),
-          e.isRequired ? (s(), p("span", at, "*")) : _("", !0)
-        ], 8, tt),
-        S(m("input", {
+          x(" " + y(e.label), 1),
+          e.isRequired ? (i(), p("span", Ze, "*")) : _("", !0)
+        ], 8, Ye),
+        M(m("input", {
           id: u.value,
           type: "text",
           name: t.label,
           placeholder: t.placeholderText,
-          "onUpdate:modelValue": c[0] || (c[0] = (d) => i.value = d),
+          "onUpdate:modelValue": c[0] || (c[0] = (d) => r.value = d),
           onKeyup: v,
           onFocusout: v
-        }, null, 40, lt), [
-          [D, i.value]
+        }, null, 40, et), [
+          [L, r.value]
         ]),
-        x(w, { "error-message": n.value }, null, 8, ["error-message"])
+        k(S, { "error-message": n.value }, null, 8, ["error-message"])
       ]),
       _: 1
     }));
   }
-}), nt = /* @__PURE__ */ g(ot, [["__scopeId", "data-v-354652ea"]]), rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), at = /* @__PURE__ */ g(tt, [["__scopeId", "data-v-894231bc"]]), lt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  ButtonComponent: J,
-  CardComponent: Z,
-  CardFooter: le,
-  CardHeader: se,
-  CheckBox: me,
-  DatetimeComponent: Se,
-  DropDown: De,
-  DropDownItem: j,
+  ButtonComponent: z,
+  CardComponent: Q,
+  CardFooter: ee,
+  CardHeader: oe,
+  CheckBox: ue,
+  DatetimeComponent: xe,
+  DropDown: Ce,
+  DropDownItem: A,
   FormGroup: T,
-  NumberInput: Be,
-  PasswordInput: Pe,
-  RenderErrorMessage: w,
-  SwitchComponent: Je,
-  TextArea: et,
-  TextInput: nt,
+  NumberInput: Ae,
+  PasswordInput: je,
+  RenderErrorMessage: S,
+  SwitchComponent: ze,
+  TextArea: We,
+  TextInput: at,
   ToolTip: C
-}, Symbol.toStringTag, { value: "Module" })), it = {
+}, Symbol.toStringTag, { value: "Module" })), nt = {
+  Disable: "DISABLE",
+  Error: "ERROR",
+  Loading: "LOADING",
+  LoggingIn: "LOGGING_IN",
+  LoggingOut: "LOGGING_OUT",
+  NoAction: "NO_ACTION",
+  Saving: "SAVING"
+}, st = {
   customer: "Customer",
   group: "Group",
   kanban_board: "Kanban Board",
@@ -715,7 +724,7 @@ const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"
   project: "Project",
   task: "Task",
   user: "User"
-}, ut = {
+}, rt = {
   customer: "customer",
   kanban_board: "kanban_board",
   kanban_card: "kanban_card",
@@ -725,32 +734,32 @@ const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"
   requirement_item: "requirement_item",
   project: "project",
   task: "task"
-}, dt = {
+}, it = {
   install(e) {
-    Object.entries(rt).forEach(([a, o]) => {
+    Object.entries(lt).forEach(([a, o]) => {
       e.component(a, o);
     });
   }
 };
 export {
-  J as ButtonComponent,
-  Z as CardComponent,
-  le as CardFooter,
-  se as CardHeader,
-  me as CheckBox,
-  Se as DatetimeComponent,
-  De as DropDown,
-  j as DropDownItem,
+  z as ButtonComponent,
+  Q as CardComponent,
+  ee as CardFooter,
+  oe as CardHeader,
+  ue as CheckBox,
+  xe as DatetimeComponent,
+  Ce as DropDown,
+  A as DropDownItem,
   T as FormGroup,
-  Be as NumberInput,
-  L as ObjectStateEnum,
-  it as ObjectTitleCaseEnums,
-  ut as ObjectTypeEnums,
-  Pe as PasswordInput,
-  w as RenderErrorMessage,
-  Je as SwitchComponent,
-  et as TextArea,
-  nt as TextInput,
+  Ae as NumberInput,
+  nt as ObjectStateEnum,
+  st as ObjectTitleCaseEnums,
+  rt as ObjectTypeEnums,
+  je as PasswordInput,
+  S as RenderErrorMessage,
+  ze as SwitchComponent,
+  We as TextArea,
+  at as TextInput,
   C as ToolTip,
-  dt as default
+  it as default
 };

package/dist/whelk-ui.umd.cjs

@@ -1 +1 @@
-(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"}})}));
+(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 x=["disabled"],E=e.defineComponent({__name:"ButtonComponent",props:{isActionRunning:{type:Boolean,default:!1,required:!1},isDisabled:{type:Boolean,default:!1,required:!1}},setup(t){const l=t,a=e.computed(()=>l.isDisabled||l.isActionRunning);return(o,s)=>(e.openBlock(),e.createElementBlock("button",{class:"wlk-button-component",role:"button",disabled:a.value},[t.isActionRunning?e.createCommentVNode("",!0):e.renderSlot(o.$slots,"default",{key:0},()=>[s[0]||(s[0]=e.createTextVNode("Submit",-1))],!0),t.isActionRunning?e.renderSlot(o.$slots,"action-state",{key:1},()=>[s[1]||(s[1]=e.createTextVNode("Updating",-1))],!0):e.createCommentVNode("",!0)],8,x))}}),f=(t,l)=>{const a=t.__vccOpts||t;for(const[o,s]of l)a[o]=s;return a},N=f(E,[["__scopeId","data-v-ff32fdfb"]]),D={},L={class:"wlk-card-component"};function R(t,l){return e.openBlock(),e.createElementBlock("div",L,[e.renderSlot(t.$slots,"default",{},void 0,!0)])}const y=f(D,[["render",R],["__scopeId","data-v-74467f04"]]),O={},A={class:"wlk-card-footer"};function F(t,l){return e.openBlock(),e.createElementBlock("div",A,[e.renderSlot(t.$slots,"default",{},void 0,!0)])}const V=f(O,[["render",F],["__scopeId","data-v-d1e72c62"]]),j={},G={class:"wlk-card-header"};function U(t,l){return e.openBlock(),e.createElementBlock("div",G,[e.renderSlot(t.$slots,"default",{},void 0,!0)])}const C=f(j,[["render",U],["__scopeId","data-v-961bdb19"]]),K={class:"checkbox-component"},P=["id","name"],z=["for"],$=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"),a=t,o=e.computed(()=>`checkbox-${a.id}`);return(s,n)=>(e.openBlock(),e.createElementBlock("div",K,[e.withDirectives(e.createElementVNode("input",{id:o.value,name:t.label,"onUpdate:modelValue":n[0]||(n[0]=r=>l.value=r),type:"checkbox"},null,8,P),[[e.vModelCheckbox,l.value]]),e.createElementVNode("label",{for:o.value},e.toDisplayString(a.label),9,z)]))}}),[["__scopeId","data-v-39385668"]]),H={},W={class:"form-group"};function X(t,l){return e.openBlock(),e.createElementBlock("div",W,[e.renderSlot(t.$slots,"default",{},void 0,!0)])}const _=f(H,[["render",X],["__scopeId","data-v-142c8936"]]),J={},Q={class:"render-error-message"};function Y(t,l){return e.openBlock(),e.createElementBlock("span",Q,[e.renderSlot(t.$slots,"default",{},void 0,!0)])}const h=f(J,[["render",Y],["__scopeId","data-v-ae516306"]]),Z=["id"],v={key:0,class:"tooltip-title"},ee={class:"tooltip-message"},te=["data-tooltip-target"],b=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,a=e.computed(()=>`tooltip-${l.id}`),o=e.ref("tooltip");return(s,n)=>{const r=e.resolveComponent("Info");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{id:a.value,class:e.normalizeClass(o.value),role:"tooltip"},[l.title!==""&&l.title!==null&&l.title!==void 0?(e.openBlock(),e.createElementBlock("p",v,e.toDisplayString(l.title),1)):e.createCommentVNode("",!0),e.createElementVNode("p",ee,e.toDisplayString(l.message),1)],10,Z),e.createElementVNode("span",{"data-tooltip-target":a.value,type:"tooltip",onMouseenter:n[0]||(n[0]=c=>o.value="tooltip show"),onMouseleave:n[1]||(n[1]=c=>o.value="tooltip"),onFocus:n[2]||(n[2]=c=>o.value="tooltip show"),onBlur:n[3]||(n[3]=c=>o.value="tooltip"),onKeydown:n[4]||(n[4]=e.withKeys(c=>o.value="tooltip",["esc"]))},[e.createVNode(r)],40,te)],64)}}}),[["__scopeId","data-v-259be5b6"]]),oe=["for"],le={key:1,"aria-description":"Field is required"},ne=["id","name"],B=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 a=l,o=t,s=e.useModel(t,"model"),n=e.ref(!1),r=e.ref(""),c=e.computed(()=>"input-"+o.label?.toLowerCase()?.replace(/ /g,"-"));function g(){n.value=!1,r.value="";let i=Number(s?.value?.toString().length);i=isNaN(i)?0:i,o.isRequired&&i===0&&(n.value=!0,r.value="This field is required"),a("isValid",!n.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(b,{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",le,"*")):e.createCommentVNode("",!0)],8,oe),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,ne),[[e.vModelText,s.value]]),e.createVNode(h,{"error-message":r.value},null,8,["error-message"])]),_:1}))}}),[["__scopeId","data-v-0431d9c6"]]),ae={class:"drop-down-items"},re=["onClick"],k=f(e.defineComponent({__name:"DropDownItem",props:{dropDownItems:{type:Array,required:!0}},emits:["dropDownItemClicked"],setup(t,{emit:l}){const a=l;function o(s){a("dropDownItemClicked",s)}return(s,n)=>(e.openBlock(),e.createElementBlock("div",ae,[(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,re))),128))]))}}),[["__scopeId","data-v-e1f5198c"]]),ie={class:"drop-down"},M=f(e.defineComponent({__name:"DropDown",props:{dropDownItems:{type:Array,required:!0}},emits:["dropDownItemClicked"],setup(t,{emit:l}){const a=l,o=e.ref(!1);function s(){o.value=!o.value}function n(r){a("dropDownItemClicked",r),o.value=!1}return(r,c)=>(e.openBlock(),e.createElementBlock("div",ie,[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(k,{onDropDownItemClicked:n,"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-e6dbee62"]]),se=["for"],de={class:"number-input-row"},ce=["aria-label","disabled"],me=["aria-label","disabled"],ue=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,a=e.useModel(t,"modelValue"),o=e.ref(""),s=e.computed(()=>"input-"+l.label?.toLowerCase()?.replace(/ /g,"-")),n=e.computed(()=>a.value>=l.maxValue),r=e.computed(()=>a.value<=l.minValue);function c(){if(o.value="",r.value){o.value="Reached Lowest Value";return}let u=Math.abs(l.minValue-a.value);u=u<Math.abs(l.stepIncrement)?u:Math.abs(l.stepIncrement);let m=a.value-u;m=m>l.maxValue?l.maxValue:m,a.value=m}function g(){if(o.value="",n.value){o.value="Reached Maxium Value";return}let u=Math.abs(l.maxValue-a.value);u=u<Math.abs(l.stepIncrement)?u:Math.abs(l.stepIncrement);let m=a.value+u;m=m<l.minValue?l.minValue:m,a.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,a.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(b,{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,se),e.createElementVNode("div",de,[e.createElementVNode("button",{type:"button",class:"negative","aria-label":`Decrement current value of ${a.value} by ${l.stepIncrement}`,disabled:r.value,onClick:c}," - ",8,ce),e.withDirectives(e.createElementVNode("input",{type:"number","aria-label":"Current value picked","aria-describedby":"helper-text-explanation","onUpdate:modelValue":m[0]||(m[0]=p=>a.value=p),onChange:m[1]||(m[1]=p=>i(p)),onKeyup:m[2]||(m[2]=p=>i(p))},null,544),[[e.vModelText,a.value]]),e.createElementVNode("button",{type:"button",class:"positive","aria-label":`Increment current value of ${a.value} by ${l.stepIncrement}`,disabled:n.value,onClick:g}," + ",8,me)]),e.createVNode(h,{"error-message":o.value},null,8,["error-message"])]),_:1}))}}),T=f(ue,[["__scopeId","data-v-a67e88cf"]]),pe=["for"],fe={key:1,"aria-description":"Field is required"},ge=["id","name","placeholder"],q=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 a=l,o=t,s=e.useModel(t,"modelValue"),n=e.ref(!1),r=e.ref(""),c=e.computed(()=>"input-"+o.label?.toLowerCase()?.replace(/ /g,"-"));function g(){n.value=!1,r.value="";let i=Number(s?.value?.toString().length);i=isNaN(i)?0:i,o.isRequired&&i===0&&(n.value=!0,r.value="This field is required"),o.minLength>0&&i<o.minLength&&(n.value=!0,r.value=`This field has a minimum length ${i} / ${o.minLength}`),a("isValid",!n.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(b,{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",fe,"*")):e.createCommentVNode("",!0)],8,pe),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,ge),[[e.vModelText,s.value]]),e.createVNode(h,{"error-message":r.value},null,8,["error-message"])]),_:1}))}}),[["__scopeId","data-v-ebc196f2"]]),_e=["for"],be={class:"switch-text"},I=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,a=e.computed(()=>n.value?"switch on":"switch off"),o=e.computed(()=>"input-"+l.label?.toLowerCase()?.replace(/ /g,"-")),s=e.computed(()=>n.value?l.onText:l.offText),n=e.useModel(t,"modelValue");function r(){n.value=!n.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(b,{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,_e),e.createElementVNode("div",{onClick:r,class:e.normalizeClass(a.value)},[e.createElementVNode("div",be,e.toDisplayString(s.value),1),g[0]||(g[0]=e.createElementVNode("div",{class:"switch-block"},null,-1))],2)]),_:1}))}}),[["__scopeId","data-v-5b394104"]]),he=["for"],ke={key:1,"aria-description":"Field is required"},Ne=["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 a=l,o=t,s=e.useModel(t,"model"),n=e.ref(!1),r=e.ref(""),c=e.computed(()=>"input-"+o.label?.toLowerCase()?.replace(/ /g,"-"));function g(){n.value=!1,r.value="";let i=Number(s?.value?.toString().length);i=isNaN(i)?0:i,o.isRequired&&i===0&&(n.value=!0,r.value="This field is required"),o.minLength>0&&i<o.minLength&&(n.value=!0,r.value=`This field has a minimum length ${i} / ${o.minLength}`),o.maxLength>0&&i>o.maxLength&&(n.value=!0,r.value=`This field has a maximum length ${i} / ${o.maxLength}`),a("isValid",!n.value)}return(i,u)=>(e.openBlock(),e.createBlock(_,null,{default:e.withCtx(()=>[e.createElementVNode("label",{for:c.value},[o.tooltipMessage!==""?(e.openBlock(),e.createBlock(b,{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",ke,"*")):e.createCommentVNode("",!0)],8,he),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,Ne),[[e.vModelText,s.value]]),e.createVNode(h,{"error-message":r.value},null,8,["error-message"])]),_:1}))}}),[["__scopeId","data-v-4d8b899d"]]),ye=["for"],Ve={key:1,"aria-description":"Field is required"},Ce=["id","name","placeholder"],S=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 a=l,o=t,s=e.useModel(t,"modelValue"),n=e.ref(!1),r=e.ref(""),c=e.computed(()=>"input-"+o.label?.toLowerCase()?.replace(/ /g,"-"));function g(){n.value=!1,r.value="";let i=Number(s?.value?.toString().length);i=isNaN(i)?0:i,o.isRequired&&i===0&&(n.value=!0,r.value="This field is required"),o.minLength>0&&i<o.minLength&&(n.value=!0,r.value=`This field has a minimum length ${i} / ${o.minLength}`),o.maxLength>0&&i>o.maxLength&&(n.value=!0,r.value=`This field has a maximum length ${i} / ${o.maxLength}`),a("isValid",!n.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(b,{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",Ve,"*")):e.createCommentVNode("",!0)],8,ye),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,Ce),[[e.vModelText,s.value]]),e.createVNode(h,{"error-message":r.value},null,8,["error-message"])]),_:1}))}}),[["__scopeId","data-v-894231bc"]]),$e=Object.freeze(Object.defineProperty({__proto__:null,ButtonComponent:N,CardComponent:y,CardFooter:V,CardHeader:C,CheckBox:$,DatetimeComponent:B,DropDown:M,DropDownItem:k,FormGroup:_,NumberInput:T,PasswordInput:q,RenderErrorMessage:h,SwitchComponent:I,TextArea:w,TextInput:S,ToolTip:b},Symbol.toStringTag,{value:"Module"})),Be={Disable:"DISABLE",Error:"ERROR",Loading:"LOADING",LoggingIn:"LOGGING_IN",LoggingOut:"LOGGING_OUT",NoAction:"NO_ACTION",Saving:"SAVING"},Me={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"},Te={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"},qe={install(t){Object.entries($e).forEach(([l,a])=>{t.component(l,a)})}};d.ButtonComponent=N,d.CardComponent=y,d.CardFooter=V,d.CardHeader=C,d.CheckBox=$,d.DatetimeComponent=B,d.DropDown=M,d.DropDownItem=k,d.FormGroup=_,d.NumberInput=T,d.ObjectStateEnum=Be,d.ObjectTitleCaseEnums=Me,d.ObjectTypeEnums=Te,d.PasswordInput=q,d.RenderErrorMessage=h,d.SwitchComponent=I,d.TextArea=w,d.TextInput=S,d.ToolTip=b,d.default=qe,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.9",
+  "version": "0.0.10",
   "type": "module",
   "main": "./dist/whelk-ui.umd.cjs",
   "module": "./dist/whelk-ui.js",
@@ -38,9 +38,8 @@
     "dev": "vite",
     "build": "vite build",
     "test": "vitest",
-    "test:ui": "vitest --ui",
+    "test:unit": "vitest --ui",
     "test:coverage": "vitest --coverage",
-    "test:e2e": "playwright test",
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs",
     "prepublishOnly": "npm run build"
@@ -50,10 +49,8 @@
   },
   "devDependencies": {
     "@csstools/postcss-global-data": "^3.1.0",
-    "@playwright/test": "^1.58.0",
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^6.0.3",
-    "@vitest/browser-playwright": "^4.0.18",
     "@vitest/coverage-v8": "^4.0.18",
     "@vitest/eslint-plugin": "^1.4.0",
     "@vitest/ui": "^4.0.18",