@beterdichtbij/component-library 0.58.5 → 0.59.0

package/dist/scss/forms/_form-check.scss

@@ -1,16 +1,16 @@
-.form-check.bd-form-checkbox{
-  padding: 0;
-
-  input {
-    background-size: 16px 11px;
-    background-repeat: no-repeat;
-    background-position: 50%;
-    float: unset;
-    margin: 0 .5em 0 0;
-
-    &.form-check-input.is-invalid{
-      border-color: $gray-500;
-      background-color: revert;
-    }
-  }
+.form-check.bd-form-checkbox{
+  padding: 0;
+
+  input {
+    background-size: 16px 11px;
+    background-repeat: no-repeat;
+    background-position: 50%;
+    float: unset;
+    margin: 0 .5em 0 0;
+
+    &.form-check-input.is-invalid{
+      border-color: $gray-500;
+      background-color: revert;
+    }
+  }
 }

package/dist/scss/forms/_form-input.scss

@@ -1,10 +1,10 @@
-.form-label {
-    line-height: 1.5rem;
-    padding: 0;
-    font-weight: $font-bold;
-    margin-bottom: 0.25rem;
-}
-
-.bd-invalid-feedback.is-invalid{
-    display:block
+.form-label {
+    line-height: 1.5rem;
+    padding: 0;
+    font-weight: $font-bold;
+    margin-bottom: 0.25rem;
+}
+
+.bd-invalid-feedback.is-invalid{
+    display:block
 }

package/dist/scss/mixins.scss

@@ -1,78 +1,78 @@
-@mixin alert($color, $bg-color) {  
-    border-radius: 8px;
-    padding: 15px;
-    font-size: 16px;
-    background-color: $bg-color;
-    color: $color;
-    border: 1px solid $color;
-    svg {
-        fill: $color;
-        &.icon{
-        margin-right:8px;
-        }
-    }  
-}
-
-@mixin badge($color, $bg-color) {  
-    border-radius: 8px;
-    padding: 5px 8px;
-    font-weight: 500;
-    font-style: normal;
-    font-size: 0.75rem;
-    line-height: 0.875rem;
-    background-color: $bg-color;
-    color: $color;
-    svg {
-        fill: $color;
-        height: 12px;
-        width: 12px;
-        &.icon{
-        margin-right:8px;
-        }
-    }  
-}
-
-@mixin button($variant, $color, $bg-color, $hover-color, $hover-bg-color, $hover-border-color, $border, $solid, $border-color) {
-    color: $color;
-    background-color: $bg-color;  
-    border:$border $solid $border-color;
-
-    svg:not(.icon-microsoft-teams) {
-        fill: $color;
-        path{
-            fill:$color
-        }
-    }
-
-    &:hover, &:focus{
-        color: $hover-color;
-        background-color: $hover-bg-color;
-        border:$border $solid $hover-border-color;   
-        
-        svg {
-            fill: $hover-color;
-            path{
-                fill:$hover-color;
-            }
-        }
-    }
-
-    &:active{
-        color: $color;
-        background-color: $bg-color;  
-        border:$border $solid $border-color;
-
-        svg {
-            fill: $color;
-            path{
-                fill:$color
-            }
-        }
-    }
-
-    &.disabled{
-        opacity: 0.5;
-        color: $color;
-        background-color: $bg-color; 
-    }
-}
+@mixin alert($color, $bg-color) {  
+    border-radius: 8px;
+    padding: 15px;
+    font-size: 16px;
+    background-color: $bg-color;
+    color: $color;
+    border: 1px solid $color;
+    svg {
+        fill: $color;
+        &.icon{
+        margin-right:8px;
+        }
+    }  
+}
+
+@mixin badge($color, $bg-color) {  
+    border-radius: 8px;
+    padding: 5px 8px;
+    font-weight: 500;
+    font-style: normal;
+    font-size: 0.75rem;
+    line-height: 0.875rem;
+    background-color: $bg-color;
+    color: $color;
+    svg {
+        fill: $color;
+        height: 12px;
+        width: 12px;
+        &.icon{
+        margin-right:8px;
+        }
+    }  
+}
+
+@mixin button($variant, $color, $bg-color, $hover-color, $hover-bg-color, $hover-border-color, $border, $solid, $border-color) {
+    color: $color;
+    background-color: $bg-color;  
+    border:$border $solid $border-color;
+
+    svg:not(.icon-microsoft-teams) {
+        fill: $color;
+        path{
+            fill:$color
+        }
+    }
+
+    &:hover, &:focus{
+        color: $hover-color;
+        background-color: $hover-bg-color;
+        border:$border $solid $hover-border-color;   
+        
+        svg {
+            fill: $hover-color;
+            path{
+                fill:$hover-color;
+            }
+        }
+    }
+
+    &:active{
+        color: $color;
+        background-color: $bg-color;  
+        border:$border $solid $border-color;
+
+        svg {
+            fill: $color;
+            path{
+                fill:$color
+            }
+        }
+    }
+
+    &.disabled{
+        opacity: 0.5;
+        color: $color;
+        background-color: $bg-color; 
+    }
+}

package/dist/scss/templates/_change-password-template.scss

@@ -1,9 +1,9 @@
-.change-password-template {
-    .alert-danger {
-        ul {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
-    }
+.change-password-template {
+    .alert-danger {
+        ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+        }
+    }
 }

package/dist/scss/templates/_content-library-template.scss

@@ -1,106 +1,140 @@
-.content-library-template {
-    .bd-form-checkbox {
-        display: flex;
-        margin-bottom: 8px;
-    }
-
-    .select-button-block {
-        .v-select {
-            &.vs--open {
-                .vs__selected-options {
-                    span {
-                        top: 10%;
-                    }
-                }
-            }
-
-            .vs__dropdown-toggle {
-                height: 40px;
-                background-color: white;
-                border: 1px solid $color-border;
-            }
-
-            &.is-invalid {
-                .vs__dropdown-toggle {
-                    border: 1px solid $color-red;
-                }
-            }
-
-            .vs__selected-options {
-                span {
-                    position: unset;
-                    color: $color-darkblue;
-                }
-            }
-
-            .vs__dropdown-menu {
-                margin-top: 0px;
-                padding-left: 10px;
-            }
-
-            input::placeholder {
-                color: #ABB0BE;
-            }
-
-            input {
-                padding: 0px;
-            }
-
-            &.vs--single.vs--open .vs__selected {
-                position: inherit;
-                top: 0%;
-            }
-
-            .vs__selected-options {
-                flex-wrap: unset;
-                padding: 0px;
-
-                span {
-                    line-height: 40px;
-                    font-size: 16px;
-                    white-space: nowrap;
-
-                    img {
-                        height: 18px;
-                        margin-right: 5px;
-                    }
-
-                    svg {
-                        margin-right: 5px;
-                    }
-                }
-            }
-
-            .vs__dropdown-menu {
-                padding: 0px;
-
-                .vs__dropdown-option {
-                    padding: 0px 0px 0px 10px;
-                    line-height: 40px;
-                    font-size: 16px;
-
-                    img {
-                        height: 18px;
-                        margin-right: 5px;
-                    }
-
-                    svg {
-                        margin-right: 5px;
-                    }
-                }
-            }
-        }
-    }
-
-    @media (max-width: 1199px) {
-        .select-button-block {
-            margin-bottom: 16px;
-        }
-    }
-
-    @media (max-width: 850px) {
-        .content-library-header__messages {
-            margin-bottom: 16px;
-        }
-    }
+.content-library-template {
+    .content-library-header {
+        margin-bottom: 15px;
+    }
+
+    .bd-form-checkbox {
+        display: flex;
+        margin-bottom: 8px;
+    }
+
+    .collapse-button {
+        padding: 0;
+
+        &-last {
+            margin-bottom: 0;
+        }
+
+        svg {
+            margin-right: 4px;
+        }
+
+        > .collapsed-show {
+            display: none;
+        }
+
+        > .collapsed-hide {
+            display: inline-block;
+        }
+
+        &.collapsed {
+            > .collapsed-show {
+                display: inline-block;
+            }
+
+            > .collapsed-hide {
+                display: none;
+            }
+        }
+    }
+
+    .select-button-block {
+        .v-select {
+            &.vs--open {
+                .vs__selected-options {
+                    span {
+                        top: 10%;
+                    }
+                }
+            }
+
+            .vs__dropdown-toggle {
+                height: 40px;
+                background-color: white;
+                border: 1px solid $color-border;
+            }
+
+            &.is-invalid {
+                .vs__dropdown-toggle {
+                    border: 1px solid $color-red;
+                }
+            }
+
+            .vs__selected-options {
+                span {
+                    position: unset;
+                    color: $color-darkblue;
+                }
+            }
+
+            .vs__dropdown-menu {
+                margin-top: 0px;
+                padding-left: 10px;
+            }
+
+            input::placeholder {
+                color: #ABB0BE;
+            }
+
+            input {
+                padding: 0px;
+            }
+
+            &.vs--single.vs--open .vs__selected {
+                position: inherit;
+                top: 0%;
+            }
+
+            .vs__selected-options {
+                flex-wrap: unset;
+                padding: 0px;
+
+                span {
+                    line-height: 40px;
+                    font-size: 16px;
+                    white-space: nowrap;
+
+                    img {
+                        height: 18px;
+                        margin-right: 5px;
+                    }
+
+                    svg {
+                        margin-right: 5px;
+                    }
+                }
+            }
+
+            .vs__dropdown-menu {
+                padding: 0px;
+
+                .vs__dropdown-option {
+                    padding: 0px 0px 0px 10px;
+                    line-height: 40px;
+                    font-size: 16px;
+
+                    img {
+                        height: 18px;
+                        margin-right: 5px;
+                    }
+
+                    svg {
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+    }
+
+    @media (max-width: 1199px) {
+        .select-button-block {
+            margin-bottom: 16px;
+        }
+    }
+
+    @media (max-width: 850px) {
+        .content-library-header__messages {
+            margin-bottom: 16px;
+        }
+    }
 }

package/dist/scss/templates/_not-found-template.scss

@@ -1,6 +1,6 @@
-.not-found-template {
-    p {
-        text-align: left;
-        margin: 0;
-    }
+.not-found-template {
+    p {
+        text-align: left;
+        margin: 0;
+    }
 }

package/dist/stores/SessionTimeOutStore.ts

@@ -1,47 +1,47 @@
-import { defineStore } from 'pinia';
-import dayjs from 'dayjs';
-import { ref } from 'vue';
-
-export const useSessionTimeOutStore = defineStore('SessionTimeOutStore', () => {
-  const threshold = ref(null)
-  const warningThreshold = ref(null);
-  const time: any = ref(dayjs());
-  const taskId = ref(null);
-
-  const SetDefaultSessionTimeOutValues = (ServerDefaultValues : any) => {
-    threshold.value = ServerDefaultValues.TimeOutSessionInMinutes;
-    warningThreshold.value = ServerDefaultValues.TimeOutSessionShowWarning;
-    SetNewTime();
-  }
-
-  const SetNewTime = () => {
-    time.value = dayjs();
-  }
-
-  const SetTaskId = (id : any) => {
-    taskId.value = id;
-  }
-
-  const ClearSessionTimeOut = () =>  {
-    if (taskId.value) {
-      clearInterval(taskId.value);
-    }
-    threshold.value = null
-    warningThreshold.value = null;
-    time.value = null;
-    taskId.value = null;
-  }
-
-  const GetTime = () => time.value;
-
-  return {
-    SetDefaultSessionTimeOutValues,
-    SetTaskId,
-    ClearSessionTimeOut,
-    threshold,
-    warningThreshold,
-    taskId,
-    GetTime,
-    SetNewTime
-  }
+import { defineStore } from 'pinia';
+import dayjs from 'dayjs';
+import { ref } from 'vue';
+
+export const useSessionTimeOutStore = defineStore('SessionTimeOutStore', () => {
+  const threshold = ref(null)
+  const warningThreshold = ref(null);
+  const time: any = ref(dayjs());
+  const taskId = ref(null);
+
+  const SetDefaultSessionTimeOutValues = (ServerDefaultValues : any) => {
+    threshold.value = ServerDefaultValues.TimeOutSessionInMinutes;
+    warningThreshold.value = ServerDefaultValues.TimeOutSessionShowWarning;
+    SetNewTime();
+  }
+
+  const SetNewTime = () => {
+    time.value = dayjs();
+  }
+
+  const SetTaskId = (id : any) => {
+    taskId.value = id;
+  }
+
+  const ClearSessionTimeOut = () =>  {
+    if (taskId.value) {
+      clearInterval(taskId.value);
+    }
+    threshold.value = null
+    warningThreshold.value = null;
+    time.value = null;
+    taskId.value = null;
+  }
+
+  const GetTime = () => time.value;
+
+  return {
+    SetDefaultSessionTimeOutValues,
+    SetTaskId,
+    ClearSessionTimeOut,
+    threshold,
+    warningThreshold,
+    taskId,
+    GetTime,
+    SetNewTime
+  }
 })