cronofy-elements 1.48.2 → 1.49.2

package/src/js/components/DateTimePicker/scss/_base.buttons.scss

@@ -1,58 +0,0 @@
-.DTP__button {
-    appearance: none;
-    background: none;
-    border: none;
-    border-radius: 0;
-    font-family: inherit;
-    position: relative;
-    display: block;
-    cursor: pointer;
-    font-size: 1em;
-    border: 0.1em solid var(--neutral);
-    background-color: var(--button);
-
-    &:focus {
-        border-color: var(--buttonActive);
-        box-shadow: inset var(--buttonActive) 0 0 0 0.1em;
-        box-shadow: inset var(--buttonActive) 0 0 0 0.1em;
-        outline: none;
-    }
-    &:hover {
-        border-color: var(--buttonActive);
-        box-shadow: inset var(--buttonActive) 0 0 0 0.1em;
-        background-color: var(--buttonHover);
-        color: var(--buttonTextHover);
-        outline: none;
-    }
-
-    &:active {
-        background-color: var(--buttonActive);
-        color: var(--buttonActiveText);
-        outline: none;
-    }
-}
-
-.DTP__disabled-button {
-    pointer-events: none;
-    border: unset;
-    background-color: unset;
-
-    &:focus {
-        border-color: unset;
-        box-shadow: unset;
-        outline: none;
-        background-color: unset;
-    }
-    &:hover {
-        border-color: unset;
-        box-shadow: unset;
-        outline: none;
-    }
-
-    &:active {
-        border-color: unset;
-        box-shadow: unset;
-        outline: none;
-        background-color: unset;
-    }
-}

package/src/js/components/DateTimePicker/scss/_base.layout.scss

@@ -1,28 +0,0 @@
-.DTP__wrapper {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.DTP__column--left {
-    position: relative;
-    flex: 1 1 21em;
-    width: 100%;
-    padding: 0 1em;
-}
-
-.DTP__column--right {
-    position: relative;
-    flex: 1 1 20em;
-    width: 100%;
-    padding: 0 1em;
-}
-
-.DTP__visually-hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-}

package/src/js/components/DateTimePicker/scss/_base.theme.scss

@@ -1,17 +0,0 @@
-.DTP {
-    @import "base.layout";
-    @import "base.buttons";
-    @import "components.calendarheader";
-    @import "components.calendargrid";
-    @import "components.confirm";
-    @import "components.details";
-    @import "components.error";
-    @import "components.loading";
-    @import "components.slotslist";
-    @import "components.timezoneselector";
-
-    position: relative;
-    width: 100%;
-    max-width: 850px;
-    border-radius: 0.4em;
-}

package/src/js/components/DateTimePicker/scss/_components.calendargrid.scss

@@ -1,78 +0,0 @@
-.DTP__calendar-grid {
-    @extend %unset;
-    table-layout: fixed;
-    width: 100%;
-}
-
-.DTP__calendar-grid--week-day,
-.DTP__calendar-grid--week-day:first-child {
-    @extend %unset;
-    text-align: center;
-    font-weight: bold;
-    font-size: 1em;
-    padding: 1em 0;
-}
-
-.DTP__calendar-grid--row {
-    @extend %unset;
-}
-
-.DTP__calendar-grid--day {
-    @extend %unset;
-    padding: 0.1em;
-}
-
-.DTP__calendar-grid--button {
-    @extend .DTP__button;
-    padding: 1em 0;
-    width: 100%;
-    overflow: hidden;
-    border-radius: 0.4em;
-    color: var(--black);
-}
-
-.DTP__calendar-grid--button:disabled {
-    @extend .DTP__disabled-button;
-}
-
-.DTP__calendar-grid--prevnext {
-    font-weight: normal;
-    color: var(--neutral);
-}
-
-.DTP__calendar-grid--available {
-    border-color: var(--neutralDark);
-    color: var(--buttonText);
-
-    &:hover {
-        border-color: var(--buttonActive);
-        box-shadow: inset var(--buttonActive) 0 0 0 0.1em;
-        background-color: var(--buttonHover);
-        color: var(--buttonTextHover);
-    }
-
-    &:active {
-        border-color: var(--buttonActive);
-        box-shadow: inset var(--buttonActive) 0 0 0 0.1em;
-        background-color: var(--buttonHover);
-        color: var(--buttonTextHover);
-    }
-}
-
-.DTP__calendar-grid--focused {
-    border-color: var(--buttonActive);
-    box-shadow: inset var(--buttonActive) 0 0 0 0.1em;
-    background-color: var(--buttonHover);
-    color: var(--buttonTextHover);
-}
-
-.DTP__calendar-grid--selected {
-    font-weight: bold;
-    background-color: var(--buttonActive);
-    color: var(--buttonActiveText);
-    border-radius: 0.4em;
-
-    &:hover {
-        background-color: var(--buttonActive);
-    }
-}

package/src/js/components/DateTimePicker/scss/_components.calendarheader.scss

@@ -1,71 +0,0 @@
-.DTP__column--calendar-header {
-    padding: 1em 2em;
-    margin: 0;
-}
-
-.DTP__calendar-header {
-    display: grid;
-    grid-template-columns: 3em 1fr 3em;
-    margin-bottom: 1em;
-    height: 3em;
-}
-
-.DTP__calendar-header--title {
-    @extend %unset;
-    margin: 0.5em 0;
-    font-size: 1.5em;
-    text-align: center;
-}
-
-.DTP__calendar-header-button {
-    @extend .DTP__button;
-    width: 100%;
-    padding: 0.1rem 0 0 0;
-    border: unset;
-    background-color: unset;
-
-    &:focus {
-        box-shadow: inset var(--buttonActive) 0 0 0 0.1rem;
-        background-color: unset;
-    }
-    &:hover {
-        background-color: unset;
-    }
-
-    &:active {
-        background-color: unset;
-    }
-}
-
-.DTP__calendar-header-button--icon {
-    width: 1.5em;
-    height: 1.5em;
-    fill: var(--neutralDark);
-
-    &:focus {
-        fill: var(--buttonActive);
-    }
-    &:hover {
-        fill: var(--buttonActive);
-    }
-
-    &:active {
-        fill: var(--buttonActive);
-    }
-}
-
-.DTP__calendar-header-button--prev {
-    transform: rotate(90deg);
-}
-
-.DTP__calendar-header-button--next {
-    transform: rotate(-90deg);
-}
-
-.DTP__calendar-header-button:disabled {
-    @extend .DTP__disabled-button;
-}
-
-.DTP__calendar-header-button:disabled svg {
-    fill: var(--neutralLight);
-}

package/src/js/components/DateTimePicker/scss/_components.confirm.scss

@@ -1,40 +0,0 @@
-.DTP__confirm-details {
-    text-align: center;
-}
-
-.DTP__confirm-details > * + * {
-    margin-top: 1em;
-}
-
-.DTP__confirm-details--info {
-    font-size: 1.5em;
-}
-
-.DTP__confirm-details--sequence-title {
-    display: inline-block;
-    font-weight: bold;
-}
-
-.DTP__confirm-details--sequence-time {
-    display: inline-block;
-    margin-left: 0.5rem;
-}
-
-.DTP__confirm-button {
-    @extend .DTP__button;
-    background-color: var(--buttonConfirm);
-    color: var(--buttonText);
-    border-radius: 0.4em;
-    min-width: 60%;
-    height: 3em;
-    margin: 1em auto;
-    padding: 0 0.75em;
-}
-
-.DTP__cancel-button {
-    @extend .DTP__button;
-    border-radius: 0.4em;
-    height: 3em;
-    margin: 1em auto;
-    padding: 0 1em;
-}

package/src/js/components/DateTimePicker/scss/_components.details.scss

@@ -1,20 +0,0 @@
-.DTP__details {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 1em 0;
-}
-
-.DTP__details--tz {
-    display: flex;
-    flex: 1 1 21em;
-    padding: 0 1em;
-}
-
-.DTP__details--tz-label {
-    padding: 0.3em 0.3em 0 0;
-}
-
-.DTP__details--duration {
-    flex: 1 1 20em;
-    padding: 0.3em 1em;
-}

package/src/js/components/DateTimePicker/scss/_components.error.scss

@@ -1,34 +0,0 @@
-.DTP__error {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 10;
-    width: 100%;
-    height: 100%;
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-.DTP__error-icon {
-    width: 2em;
-    height: 2em;
-    fill: var(--black);
-}
-
-.DTP__error-text-wrapper {
-    font-weight: bold;
-    display: block;
-    text-align: center;
-    margin-top: 1em;
-    color: var(--black);
-}
-.DTP__error-text {
-    display: block;
-    text-align: center;
-    margin-top: 1em;
-    max-width: 36em;
-    color: var(--black);
-}

package/src/js/components/DateTimePicker/scss/_components.loading.scss

@@ -1,36 +0,0 @@
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.DTP__loading-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 10;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    svg {
-        width: 1em;
-        height: 1em;
-        animation: spin infinite linear 1s;
-    }
-}
-
-.DTP__calendar-loading {
-  margin-top: 1rem;
-  svg {
-    width: 1em;
-    height: 1em;
-    animation: spin infinite linear 1s;
-    margin-right: 1rem;
-  }
-}

package/src/js/components/DateTimePicker/scss/_components.slotslist.scss

@@ -1,43 +0,0 @@
-.DTP__time-slots-list > * + *,
-.DTP__slot-list > * + * {
-    margin-top: 1em;
-}
-
-.DTP__time-slots-list--header {
-    font-size: 1.5em;
-    margin: 0.5em 0;
-    text-align: center;
-}
-
-.DTP__slot-list,
-.DTP__slot-list--item {
-    @extend %unset;
-    list-style: none;
-}
-
-.DTP__time-slot {
-    @extend .DTP__button;
-    border: 0.1em solid var(--neutral);
-    background: var(--white);
-    padding: 0.75em 0;
-    width: 100%;
-    height: 3em;
-    border-radius: 0.4em;
-}
-
-.DTP__time-slot--detailed {
-  height: unset;
-}
-
-.DTP__detailed-slot-list,
-.DTP__detailed-slot-list--item {
-    @extend %unset;
-    list-style: none;
-}
-
-.DTP__time-slot--selected {
-    @extend .DTP__button;
-    background-color: var(--buttonActive);
-    color: var(--buttonActiveText);
-    outline: none;
-}

package/src/js/components/DateTimePicker/scss/_components.timezoneselector.scss

@@ -1,73 +0,0 @@
-.DTP__timezone-selector {
-    position: relative;
-    flex-grow: 1;
-}
-
-.DTP__timezone-selector--button {
-    @extend .DTP__button;
-    display: inline-block;
-    border: 0.1em solid var(--neutral);
-    background: var(--white);
-    padding: 0.3em 1em;
-    text-align: left;
-    width: 100%;
-    border-radius: 0.4em;
-    z-index: 2;
-}
-
-.DTP__timezone-selector--icon {
-    width: 1em;
-    height: 1em;
-    margin-top: 0.2em;
-    fill: var(--neutralDark);
-    float: right;
-}
-
-.DTP__timezone-selector--icon-open {
-    transform: scaleY(-1);
-}
-
-.DTP__timezone-selector--listbox-wrapper {
-    @extend %unset;
-    position: absolute;
-    width: 100%;
-    border: 0.1em solid var(--neutral);
-    background-color: var(--white);
-    border-top: 0;
-    padding-top: 1.15em;
-    top: 1em;
-    z-index: 1;
-    border-radius: 0 0 0.4em 0.4em;
-}
-
-.DTP__timezone-selector--listbox {
-    @extend %unset;
-    width: 100%;
-    max-height: 15em;
-    overflow-y: auto;
-}
-
-.DTP__timezone-selector--option {
-    @extend %unset;
-    display: block;
-    cursor: pointer;
-    padding: 0.5em 1em;
-    position: relative;
-    line-height: 1.8em;
-
-    &:hover {
-        background-color: var(--buttonHover);
-        color: var(--buttonTextHover);
-    }
-}
-
-.DTP__timezone-selector--focused {
-    border-color: var(--buttonActive);
-    box-shadow: inset var(--buttonActive) 0 0 0 0.1em;
-    outline: none;
-}
-
-.DTP__timezone-selector--selected {
-    background-color: var(--buttonHover);
-    color: var(--buttonTextHover);
-}

package/src/js/components/DateTimePicker/scss/_generic.reset.scss

@@ -1,18 +0,0 @@
-.DTP {
-    // General style reset;
-    @extend %globals;
-}
-
-//Unsetting styles to avoid clashes with styles outside the component
-%unset {
-    padding: unset;
-    margin-top: unset;
-    margin-bottom: unset;
-    margin-left: unset;
-    margin-right: unset;
-    border: unset;
-    background: unset;
-    border-spacing: 0;
-    font-style: unset;
-    list-style: unset;
-}

package/src/js/components/DateTimePicker/scss/_settings.colours.scss

@@ -1,17 +0,0 @@
-.DTP {
-    // Fallbacks
-    --black: #000000;
-    --white: #ffffff;
-
-    --neutralDark: #6f6f6f;
-    --neutral: #999999;
-    --neutralLight: #e4ebf2;
-
-    --button: var(--white);
-    --buttonConfirm: #e2fac8;
-    --buttonHover: #c0e992;
-    --buttonText: var(--black);
-    --buttonTextHover: var(--black);
-    --buttonActive: #7ed321;
-    --buttonActiveText: var(--black);
-}

package/src/js/components/DateTimePicker/scss/datetimepicker.scss

@@ -1,5 +0,0 @@
-@import "../../../styles/settings.utils";
-@import "settings.colours";
-
-@import "generic.reset";
-@import "base.theme";

package/src/js/components/DateTimePicker/utils/calendar-keyboard.js

@@ -1,109 +0,0 @@
-import moment from "moment";
-
-export const findGridPosition = (date, days) => {
-    const result = Object.create({});
-    for (let row = 0; row < days.length; row++) {
-        const index = value => date === value.date;
-        const col = days[row].findIndex(index);
-        if (col >= 0) {
-            result.date = date;
-            result.col = col;
-            result.row = row;
-        }
-    }
-    return result;
-};
-
-export const getAvailableDaysInMonthDisplay = days => {
-    const availableDaysInMonthDisplay = [];
-    for (let row = 0; row < 6; row++) {
-        const results = days[row].filter(value => true === value.isAvailable);
-        results.forEach(item => availableDaysInMonthDisplay.push(item.date));
-    }
-    return availableDaysInMonthDisplay;
-};
-
-export const calculateNextGridDate = ({ event, position, days, selectDay }) => {
-    const row = position.row;
-    const col = position.col;
-    switch (event.key) {
-        case "ArrowRight":
-        case "+":
-            //loop through rows from starting row position
-            for (let pos = row; pos < 6; pos++) {
-                const currentArray = days[pos];
-                const array = pos === row ? currentArray.slice(col + 1) : currentArray;
-
-                const nextDatePos = array.find(value => true === value.isAvailable);
-                if (nextDatePos) {
-                    return nextDatePos;
-                }
-            }
-            break;
-        case "ArrowLeft":
-        case "-":
-            for (let pos = row; pos >= 0; pos--) {
-                const currentArray = days[pos];
-                const array =
-                    pos === row
-                        ? currentArray.slice(0, col).reverse()
-                        : currentArray.slice().reverse();
-
-                const nextDatePos = array.find(value => value.isAvailable);
-                if (nextDatePos) {
-                    return nextDatePos;
-                }
-            }
-            break;
-        case "ArrowUp":
-            event.preventDefault();
-            for (let pos = row - 1; pos >= 0; pos--) {
-                const currentArray = days[pos];
-                const array =
-                    pos === row - 1
-                        ? currentArray.slice(0, col + 1).reverse()
-                        : currentArray.slice().reverse();
-
-                const nextDatePos = array.find(value => true === value.isAvailable);
-                if (nextDatePos) {
-                    return nextDatePos;
-                }
-            }
-            break;
-        case "ArrowDown":
-            event.preventDefault();
-            for (let pos = row + 1; pos < 6; pos++) {
-                const currentArray = days[pos];
-                const array = pos === row + 1 ? currentArray.slice(col) : currentArray.slice();
-
-                const nextDatePos = array.find(value => true === value.isAvailable);
-                if (nextDatePos) {
-                    return nextDatePos;
-                }
-            }
-            break;
-        case "Enter":
-            selectDay(position.date);
-            break;
-    }
-};
-
-export const calculateNextFocusMonth = ({ event, position, availableDays }) => {
-    const result = Object.create({});
-    switch (event.key) {
-        case "ArrowRight":
-        case "ArrowDown":
-        case "+":
-            event.preventDefault();
-            result.date = availableDays[position + 1];
-            result.month = moment(result.date, "YYYY-MM-DD").format("YYYY-MM");
-            return result;
-        case "ArrowLeft":
-        case "ArrowUp":
-        case "-":
-            event.preventDefault();
-            result.date = availableDays[position - 1];
-            result.month = moment(result.date, "YYYY-MM-DD").format("YYYY-MM");
-            return result;
-    }
-};