@nylas/web-elements 1.0.2-canary.2 → 1.1.0-canary.3

package/dist/collection/components/scheduler-editor/nylas-form-card/nylas-form-card.css

@@ -28,10 +28,10 @@
 .nylas-form-card {
   width: 100%;
   border-radius: 8px;
-  border: 1px solid var(--Nylas-base-Nylas-base-200, #b3b8d8);
+  border: 1px solid var(--nylas-base-200);
 }
 
 .nylas-form-card__header {
   padding: 1rem;
-  border-bottom: 1px solid var(--Nylas-base-Nylas-base-200, #b3b8d8);
+  border-bottom: 1px solid var(--nylas-base-200);
 }

package/dist/collection/components/scheduler-editor/nylas-form-card/nylas-form-card.js

@@ -29,7 +29,7 @@ export class NylasFormCard {
         debug('nylas-event-card', 'disconnectedCallback');
     }
     render() {
-        return (h(Host, { key: '53542805c27fe36d7a16d153a9b97470871de66b' }, h("div", { key: '1743e493b153a6dd4719fd2756dc63b9a50658e9', class: "nylas-form-card" }, h("div", { key: '17253fff54dda23c170d8891abced0d315478e3d', class: "nylas-form-card__header" }, h("slot", { key: '419238cd54b7b03f2f5771c0d1315675480fe280', name: "header-title" }), h("slot", { key: '0e398d4cffa4fb7a505dfdf712401cb38a9e189a', name: "header-subtitle" })), h("div", { key: '7fc1d3c1105aa66a0e33fd3fde606dc5dbeedb97', class: "nylas-form-card__content" }, h("slot", { key: '95f72c104052bec25883dff2d93227aa2e6e5eb4', name: "content" })))));
+        return (h(Host, { key: 'a25e6cf278893d8152895bedc42fa83584b26ed1' }, h("div", { key: 'ca83bf28168fe3cfff4e910dc80536574c33e55b', class: "nylas-form-card" }, h("div", { key: '0bc4aa5cfc27ed26f301a29b45ab7bafd80f507f', class: "nylas-form-card__header" }, h("slot", { key: '1df96d905cf7c3e563eaf36f9825bb67f190795a', name: "header-title" }), h("slot", { key: 'd62a004ea3fb7a282a986b749a8b5998827cf498', name: "header-subtitle" })), h("div", { key: '6f2f1576516dee66795f3c423fd23725978891b0', class: "nylas-form-card__content" }, h("slot", { key: 'af397af820898e806cf64a7528563a31ce821fd3', name: "content" })))));
     }
     static get is() { return "nylas-form-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.css

@@ -0,0 +1,46 @@
+:host {
+  --nylas-primary: #2563eb;
+  --nylas-error: #cc4841;
+  --nylas-error-pressed: #992222;
+  --nylas-wraning: #f06c00;
+  --nylas-success: #16a392;
+  --nylas-info: #2b8fc2;
+  --nylas-base-0: #ffffff;
+  --nylas-base-25: #fcfcfd;
+  --nylas-base-50: #f8f9fc;
+  --nylas-base-100: #eaecf5;
+  --nylas-base-200: #d5d9eb;
+  --nylas-base-300: #b3b8d8;
+  --nylas-base-400: #717bbc;
+  --nylas-base-500: #4e5ba6;
+  --nylas-base-600: #3e4784;
+  --nylas-base-700: #263f72;
+  --nylas-base-800: #293056;
+  --nylas-base-900: #101323;
+  --nylas-base-950: #0e101b;
+  --nylas-border-radius: 0.25rem;
+  --nylas-border-radius-2x: 0.5rem;
+  --nylas-border-radius-3x: 0.75rem;
+  --nylas-font-family: "Inter", sans-serif;
+}
+
+.nylas-limit-future-bookings {
+  display: flex;
+  justify-content: space-between;
+  font-family: var(--nylas-font-family);
+}
+.nylas-limit-future-bookings label {
+  display: flex;
+  align-items: center;
+  color: var(--nylas-base-800);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%; /* 21px */
+}
+.nylas-limit-future-bookings label span.label-icon {
+  margin-left: 4px;
+}
+.nylas-limit-future-bookings label span.label-icon tooltip-component {
+  display: flex;
+}

package/dist/collection/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.js

@@ -0,0 +1,191 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { RegisterComponent } from "../../../common/register-component";
+import { debug } from "../../../utils/utils";
+import { Host, h } from "@stencil/core";
+export class NylasLimitFutureBookings {
+    constructor() {
+        this.availableDaysInFuture = undefined;
+        this.name = 'limit-future-bookings';
+        this.selectedNumber = 1;
+        this.selectedPeriod = 'day';
+    }
+    elementNameChangedHandler(newValue) {
+        debug('nylas-limit-future-bookings', 'elementNameChangedHandler', newValue);
+        this.host.setAttribute('name', newValue);
+    }
+    availableDaysInFutureChanged(newValue) {
+        const { number, period } = this.calculateNumberAndPeriodFromDays(newValue);
+        this.selectedNumber = number;
+        this.selectedPeriod = period;
+    }
+    connectedCallback() {
+        debug('nylas-limit-future-bookings', 'connectedCallback');
+    }
+    componentWillLoad() {
+        debug('nylas-limit-future-bookings', 'componentWillLoad');
+        this.host.setAttribute('name', this.name);
+    }
+    componentDidLoad() {
+        debug('nylas-limit-future-bookings', 'componentDidLoad');
+        this.availableDaysInFutureChanged(this.availableDaysInFuture ?? 1);
+        if (typeof this.internals.setFormValue !== 'function') {
+            return;
+        }
+        this.internals.setFormValue(this.availableDaysInFuture?.toString() ?? '1', this.name);
+    }
+    disconnectedCallback() {
+        debug('nylas-limit-future-bookings', 'disconnectedCallback');
+    }
+    timePeriodChangedHandler(event) {
+        const { number, period } = event.detail;
+        let availableDaysInFuture;
+        if (period === 'day') {
+            availableDaysInFuture = number;
+        }
+        else if (period === 'week') {
+            availableDaysInFuture = number * 7;
+        }
+        else {
+            availableDaysInFuture = number * 30;
+        }
+        this.valueChanged.emit({ value: availableDaysInFuture, name: this.name });
+        if (typeof this.internals.setFormValue !== 'function') {
+            return;
+        }
+        this.internals.setFormValue(availableDaysInFuture.toString(), this.name);
+    }
+    calculateNumberAndPeriodFromDays(days) {
+        if (days >= 30 && days % 30 === 0) {
+            return { number: days / 30, period: 'month' };
+        }
+        else if (days >= 7 && days % 7 === 0) {
+            return { number: days / 7, period: 'week' };
+        }
+        else {
+            return { number: days, period: 'day' };
+        }
+    }
+    render() {
+        return (h(Host, { key: '8057320077aad1ea65297b4cac79fe11f69ab161' }, h("div", { key: '991d810bee6817a1ec26482807fece9d884b7844', class: "nylas-limit-future-bookings", part: "nlfb" }, h("label", { key: 'caf0946d5a7cb202dc02cd596a7721e52278cb55' }, "Limit future bookings", h("span", { key: 'fff09830bc407f7ce1fecf7e6809f2a030ce9a3e', class: "label-icon" }, h("tooltip-component", { key: '8c9cd31ae211d1d3a7f017032d7c1abb3f1c7df6' }, h("info-icon", { key: '43f8b14a4b28effd21e9b5a87b20f63b6bf0061d', slot: "tooltip-icon" }), h("span", { key: 'bdfebd15750111829926da4dc0820f562c4fd9aa', slot: "tooltip-content" }, "Set a limit on how far in the future bookings can be made.")))), h("time-period-selector", { key: 'de949c9c3aa9234102159bdec61efc061ac49408', id: "limit-future-bookings", timePeriods: ['day', 'week', 'month'], exportparts: "tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content", defaultSelectedNumber: this.selectedNumber, defaultSelectedPeriod: this.selectedPeriod }))));
+    }
+    static get is() { return "nylas-limit-future-bookings"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-limit-future-bookings.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-limit-future-bookings.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "availableDaysInFuture": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "available-days-in-future",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "'limit-future-bookings'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedNumber": {},
+            "selectedPeriod": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{\n    value: string;\n    name: string;\n  }",
+                    "resolved": "{ value: string; name: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "availableDaysInFuture",
+                "methodName": "availableDaysInFutureChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "timePeriodChanged",
+                "method": "timePeriodChangedHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-limit-future-bookings',
+        eventToProps: {},
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasLimitFutureBookings.prototype, "render", null);
+//# sourceMappingURL=nylas-limit-future-bookings.js.map

package/dist/collection/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-limit-future-bookings.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-limit-future-bookings/nylas-limit-future-bookings.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAEhE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAmB9H,MAAM,OAAO,wBAAwB;;;oBAIZ,uBAAuB;8BAEZ,CAAC;8BACD,KAAK;;IAQvC,yBAAyB,CAAC,QAAgB;QACxC,KAAK,CAAC,6BAA6B,EAAE,2BAA2B,EAAE,QAAQ,CAAC,CAAC;QAC5E,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC3C,CAAC;IAGD,4BAA4B,CAAC,QAAgB;QAC3C,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,gCAAgC,CAAC,QAAQ,CAAC,CAAC;QAC3E,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC;QAC7B,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC;IAC/B,CAAC;IAOD,iBAAiB;QACf,KAAK,CAAC,6BAA6B,EAAE,mBAAmB,CAAC,CAAC;IAC5D,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,6BAA6B,EAAE,mBAAmB,CAAC,CAAC;QAC1D,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;IAED,gBAAgB;QACd,KAAK,CAAC,6BAA6B,EAAE,kBAAkB,CAAC,CAAC;QACzD,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,qBAAqB,IAAI,CAAC,CAAC,CAAC;QACnE,IAAI,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,KAAK,UAAU,EAAE,CAAC;YACtD,OAAO;QACT,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,qBAAqB,EAAE,QAAQ,EAAE,IAAI,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACxF,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,6BAA6B,EAAE,sBAAsB,CAAC,CAAC;IAC/D,CAAC;IAGD,wBAAwB,CACtB,KAGE;QAEF,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACxC,IAAI,qBAAqB,CAAC;QAC1B,IAAI,MAAM,KAAK,KAAK,EAAE,CAAC;YACrB,qBAAqB,GAAG,MAAM,CAAC;QACjC,CAAC;aAAM,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YAC7B,qBAAqB,GAAG,MAAM,GAAG,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,qBAAqB,GAAG,MAAM,GAAG,EAAE,CAAC;QACtC,CAAC;QACD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC1E,IAAI,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,KAAK,UAAU,EAAE,CAAC;YACtD,OAAO;QACT,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,qBAAqB,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3E,CAAC;IAED,gCAAgC,CAAC,IAAY;QAC3C,IAAI,IAAI,IAAI,EAAE,IAAI,IAAI,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC;YAClC,OAAO,EAAE,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;QAChD,CAAC;aAAM,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACvC,OAAO,EAAE,MAAM,EAAE,IAAI,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;QACzC,CAAC;IACH,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,MAAM;gBAClD;;oBAEE,6DAAM,KAAK,EAAC,YAAY;wBACtB;4BACE,kEAAW,IAAI,EAAC,cAAc,GAAG;4BACjC,6DAAM,IAAI,EAAC,iBAAiB,iEAAkE,CAC5E,CACf,CACD;gBACR,6EACE,EAAE,EAAC,uBAAuB,EAC1B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EACrC,WAAW,EAAC,0UAA0U,EACtV,qBAAqB,EAAE,IAAI,CAAC,cAAc,EAC1C,qBAAqB,EAAE,IAAI,CAAC,cAAc,GAC1C,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAxBC;IALC,iBAAiB,CAA8G;QAC9H,IAAI,EAAE,6BAA6B;QACnC,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;sDAwBD","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-limit-future-bookings` component is a form input for the description of an event.\n * @part nlfb - The limit future bookings container\n * @part nlfb__number-dropdown - The number dropdown container\n * @part nlfb__number-dropdown-button - The number dropdown button\n * @part nlfb__number-dropdown-content - The number dropdown content\n * @part nlfb__period-dropdown - The period dropdown container\n * @part nlfb__period-dropdown-button - The period dropdown button\n * @part nlfb__period-dropdown-content - The period dropdown content\n */\n@Component({\n  tag: 'nylas-limit-future-bookings',\n  styleUrl: 'nylas-limit-future-bookings.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasLimitFutureBookings {\n  @Prop() availableDaysInFuture?: number;\n  @AttachInternals() internals!: ElementInternals;\n  @Element() host!: HTMLElement;\n  @Prop() name: string = 'limit-future-bookings';\n\n  @State() selectedNumber: number = 1;\n  @State() selectedPeriod: string = 'day';\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-limit-future-bookings', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('availableDaysInFuture')\n  availableDaysInFutureChanged(newValue: number) {\n    const { number, period } = this.calculateNumberAndPeriodFromDays(newValue);\n    this.selectedNumber = number;\n    this.selectedPeriod = period;\n  }\n\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-limit-future-bookings', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-limit-future-bookings', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-limit-future-bookings', 'componentDidLoad');\n    this.availableDaysInFutureChanged(this.availableDaysInFuture ?? 1);\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(this.availableDaysInFuture?.toString() ?? '1', this.name);\n  }\n\n  disconnectedCallback() {\n    debug('nylas-limit-future-bookings', 'disconnectedCallback');\n  }\n\n  @Listen('timePeriodChanged')\n  timePeriodChangedHandler(\n    event: CustomEvent<{\n      number: number;\n      period: string;\n    }>,\n  ) {\n    const { number, period } = event.detail;\n    let availableDaysInFuture;\n    if (period === 'day') {\n      availableDaysInFuture = number;\n    } else if (period === 'week') {\n      availableDaysInFuture = number * 7;\n    } else {\n      availableDaysInFuture = number * 30;\n    }\n    this.valueChanged.emit({ value: availableDaysInFuture, name: this.name });\n    if (typeof this.internals.setFormValue !== 'function') {\n      return;\n    }\n    this.internals.setFormValue(availableDaysInFuture.toString(), this.name);\n  }\n\n  calculateNumberAndPeriodFromDays(days: number): { number: number; period: string } {\n    if (days >= 30 && days % 30 === 0) {\n      return { number: days / 30, period: 'month' };\n    } else if (days >= 7 && days % 7 === 0) {\n      return { number: days / 7, period: 'week' };\n    } else {\n      return { number: days, period: 'day' };\n    }\n  }\n\n  @RegisterComponent<NylasLimitFutureBookings, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-limit-future-bookings',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host>\n        <div class=\"nylas-limit-future-bookings\" part=\"nlfb\">\n          <label>\n            Limit future bookings\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">Set a limit on how far in the future bookings can be made.</span>\n              </tooltip-component>\n            </span>\n          </label>\n          <time-period-selector\n            id=\"limit-future-bookings\"\n            timePeriods={['day', 'week', 'month']}\n            exportparts=\"tps__number-dropdown: nlfb__number-dropdown, tps__number-dropdown-button: nlfb__number-dropdown-button, tps__number-dropdown-content: nlfb__number-dropdown-content, tps__period-dropdown: nlfb__period-dropdown, tps__period-dropdown-button: nlfb__period-dropdown-button, tps__period-dropdown-content: nlfb__period-dropdown-content\"\n            defaultSelectedNumber={this.selectedNumber}\n            defaultSelectedPeriod={this.selectedPeriod}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-limit-future-bookings/test/nylas-limit-future-bookings.spec.js

@@ -0,0 +1,41 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { NylasLimitFutureBookings } from "../nylas-limit-future-bookings";
+import { h } from "@stencil/core";
+import { SelectDropdown } from "../../../design-system/select-dropdown/select-dropdown";
+import { TimePeriodSelector } from "../../../design-system/time-period-selector/time-period-selector";
+describe('nylas-limit-future-bookings', () => {
+    let nylasLimitFutureBookings;
+    let page;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [NylasLimitFutureBookings, TimePeriodSelector, SelectDropdown],
+            template: () => {
+                return h("nylas-limit-future-bookings", { name: "limit-future-bookings", availableDaysInFuture: 1 });
+            },
+        });
+        nylasLimitFutureBookings = page.rootInstance;
+    });
+    it('renders', async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it('selects default available days', async () => {
+        const availableDaysNumberButton = page.root.shadowRoot.querySelector('select-dropdown#time-number').shadowRoot.querySelector('button');
+        expect(availableDaysNumberButton.textContent).toBe('1');
+        const availableDaysPeriodButton = page.root.shadowRoot.querySelector('select-dropdown#time-period').shadowRoot.querySelector('button');
+        expect(availableDaysPeriodButton.textContent).toBe('day');
+    });
+    it('selects available days in future', async () => {
+        const spyEvent = jest.fn();
+        nylasLimitFutureBookings.valueChanged = {
+            emit: spyEvent,
+        };
+        const mockEvent = new CustomEvent('timePeriodChanged', {
+            detail: { number: 2, period: 'week' },
+            bubbles: true,
+            composed: true,
+        });
+        nylasLimitFutureBookings.timePeriodChangedHandler(mockEvent);
+        expect(spyEvent).toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=nylas-limit-future-bookings.spec.js.map

package/dist/collection/components/scheduler-editor/nylas-limit-future-bookings/test/nylas-limit-future-bookings.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-limit-future-bookings.spec.js","sourceRoot":"","sources":["../../../../../src/components/scheduler-editor/nylas-limit-future-bookings/test/nylas-limit-future-bookings.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,kBAAkB,EAAE,MAAM,kEAAkE,CAAC;AAEtG,QAAQ,CAAC,6BAA6B,EAAE,GAAG,EAAE;IAC3C,IAAI,wBAAkD,CAAC;IACvD,IAAI,IAAS,CAAC;IACd,UAAU,CAAC,KAAK,IAAI,EAAE;QACpB,IAAI,GAAG,MAAM,WAAW,CAAC;YACvB,UAAU,EAAE,CAAC,wBAAwB,EAAE,kBAAkB,EAAE,cAAc,CAAC;YAC1E,QAAQ,EAAE,GAAG,EAAE;gBACb,OAAO,mCAA6B,IAAI,EAAC,uBAAuB,EAAC,qBAAqB,EAAE,CAAC,GAAgC,CAAC;YAC5H,CAAC;SACF,CAAC,CAAC;QACH,wBAAwB,GAAG,IAAI,CAAC,YAAwC,CAAC;IAC3E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,yBAAyB,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACvI,MAAM,CAAC,yBAAyB,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACxD,MAAM,yBAAyB,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACvI,MAAM,CAAC,yBAAyB,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC3B,wBAAwB,CAAC,YAAY,GAAG;YACtC,IAAI,EAAE,QAAQ;SACf,CAAC;QACF,MAAM,SAAS,GAAG,IAAI,WAAW,CAAC,mBAAmB,EAAE;YACrD,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE;YACrC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QACH,wBAAwB,CAAC,wBAAwB,CAAC,SAAS,CAAC,CAAC;QAC7D,MAAM,CAAC,QAAQ,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasLimitFutureBookings } from '../nylas-limit-future-bookings';\nimport { h } from '@stencil/core';\nimport { SelectDropdown } from '../../../design-system/select-dropdown/select-dropdown';\nimport { TimePeriodSelector } from '../../../design-system/time-period-selector/time-period-selector';\n\ndescribe('nylas-limit-future-bookings', () => {\n  let nylasLimitFutureBookings: NylasLimitFutureBookings;\n  let page: any;\n  beforeEach(async () => {\n    page = await newSpecPage({\n      components: [NylasLimitFutureBookings, TimePeriodSelector, SelectDropdown],\n      template: () => {\n        return <nylas-limit-future-bookings name=\"limit-future-bookings\" availableDaysInFuture={1}></nylas-limit-future-bookings>;\n      },\n    });\n    nylasLimitFutureBookings = page.rootInstance as NylasLimitFutureBookings;\n  });\n\n  it('renders', async () => {\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it('selects default available days', async () => {\n    const availableDaysNumberButton = page.root.shadowRoot.querySelector('select-dropdown#time-number').shadowRoot.querySelector('button');\n    expect(availableDaysNumberButton.textContent).toBe('1');\n    const availableDaysPeriodButton = page.root.shadowRoot.querySelector('select-dropdown#time-period').shadowRoot.querySelector('button');\n    expect(availableDaysPeriodButton.textContent).toBe('day');\n  });\n\n  it('selects available days in future', async () => {\n    const spyEvent = jest.fn();\n    nylasLimitFutureBookings.valueChanged = {\n      emit: spyEvent,\n    };\n    const mockEvent = new CustomEvent('timePeriodChanged', {\n      detail: { number: 2, period: 'week' },\n      bubbles: true,\n      composed: true,\n    });\n    nylasLimitFutureBookings.timePeriodChangedHandler(mockEvent);\n    expect(spyEvent).toHaveBeenCalled();\n  });\n});\n"]}

package/dist/collection/components/scheduler-editor/nylas-location-component/nylas-location-component.js

@@ -70,10 +70,10 @@ export class NylasLocationComponent {
             { value: 'custom', label: 'Custom location' },
         ];
         const icons = {
-            none: h("location-off-icon", { key: '021fd97ea9f51cc9ef6edab397e12181f24bddb2' }),
-            custom: h("location-icon", { key: '24a170f7a38501da4f46eef8da5231f9002347b1' }),
+            none: h("location-off-icon", { key: 'b6ed0f7da911d13fe204658d1dbfbc29d569a99a' }),
+            custom: h("location-icon", { key: '08a5c193876813578037ee6003ab03fd947fb87d' }),
         };
-        return (h(Host, { key: '8b520fcbc5f57bf6ab51d6cb83fd58eb452f702a' }, h("div", { key: '6e7b240c7b5603cea809a8e83f003ffc48db183b', class: "nylas-event-location" }, h("label", { key: 'e6979aeff1965f62540bc274818cbb7b46f454d6', htmlFor: "location" }, "Location type", h("span", { key: '0334a62e0b8d15d07f35722561743d9654364176', class: "label-icon" }, h("tooltip-component", { key: 'a1267dbc795c9abc4faa08ee4bd28d5fbb0dcc8f' }, h("info-icon", { key: 'ad03af910d69f86b5459e8e3d9129a6532b67b27', slot: "tooltip-icon" }), h("span", { key: '8bec251481f72beea08ed8649b628a6d9604ef39', slot: "tooltip-content" }, "Choose how you\u2019ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.")))), h("div", { key: '4cddd535ae80ee17f25566fff3c79cb92fe5ed73', class: "location-input" }, h("select-dropdown", { key: 'efe580f62aa4ea955cefff02a9e133a1eb66057d', withSearch: false, name: "location", options: locationOptions, defaultSelectedOption: locationOptions.find(i => i.value == this.selectedLocationOption) }, h("span", { key: '58faabe958e2faf6cc518d3a02ff7dee5586f48d', slot: "select-icon" }, icons[this.selectedLocationOption])), this.selectedLocationOption === 'custom' && (h("input", { type: "text", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
+        return (h(Host, { key: 'e512133eb2a9213bfacc2edad0581b7a6ad41bbc' }, h("div", { key: '1f0e59707c41f7836805ff26efbd5cc119dfef11', class: "nylas-event-location", part: "nel" }, h("label", { key: '60e264aa383ae29342678ecf23b12631fff1bc98', htmlFor: "location" }, "Location type", h("span", { key: '64c34dbeafa4b5c033be3d1facede6e737b915e1', class: "label-icon" }, h("tooltip-component", { key: '0c569694141c72418e997a85328127968d05eac1' }, h("info-icon", { key: '411fe82e0b6296b34aae95459c9da8bc07bd8131', slot: "tooltip-icon" }), h("span", { key: '67b4582af4fe7085c748e842b5fda1a46a454edf', slot: "tooltip-content" }, "Choose how you\u2019ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.")))), h("div", { key: '3f7b59eaae37afcd7abc4af3c608c5e6dc3ebc30', class: "location-input" }, h("select-dropdown", { key: '424550ac2c3fd61e7c59d2e8c98cedfd156d5661', withSearch: false, name: "location", options: locationOptions, defaultSelectedOption: locationOptions.find(i => i.value == this.selectedLocationOption), exportparts: "sd__dropdown: nel__dropdown, sd__dropdown-button: nel__dropdown-button, sd__dropdown-content: nel__dropdown-content" }, h("span", { key: '300fd4134259f97fcf3ba09d3d296c15ca18eec7', slot: "select-icon" }, icons[this.selectedLocationOption])), this.selectedLocationOption === 'custom' && (h("input", { type: "text", part: "nel__location", id: "location", name: "location", maxlength: "1024", value: this.location, onInput: e => this.handleChange(e) }))))));
     }
     static get is() { return "nylas-location-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-location-component/nylas-location-component.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-location-component.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-location-component/nylas-location-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-location-component` component is a form input for the description of an event.\n */\n@Component({\n  tag: 'nylas-location-component',\n  styleUrl: 'nylas-location-component.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasLocationComponent {\n  @Prop() eventLocation?: string;\n  @State() location: string = this.eventLocation ?? '';\n  @State() selectedLocationOption: string = this.eventLocation ? 'custom' : 'none';\n  @AttachInternals() internals!: ElementInternals;\n  @Element() host!: HTMLElement;\n  @Prop() name: string = 'location';\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-location-component', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n  @Watch('eventLocation')\n  eventLocationChangedHandler(newValue: string, oldValue: string) {\n    debug('nylas-location-component', 'eventLocationChangedHandler', newValue);\n    if (newValue === oldValue) {\n      return;\n    }\n    this.selectedLocationOption = newValue ? 'custom' : 'none';\n  }\n\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-location-component', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-location-component', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-location-component', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-location-component', 'disconnectedCallback');\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string }>) {\n    this.selectedLocationOption = event.detail.value;\n    if (this.selectedLocationOption === 'none') {\n      this.location = '';\n      this.setFormValue('', 'location');\n      this.valueChanged.emit({ value: '', name: this.name });\n    }\n  }\n\n  setFormValue(value: string, name: string) {\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(value, name);\n    }\n  }\n\n  handleChange(event) {\n    this.location = event.target.value;\n    this.setFormValue(event.target.value, 'location');\n    this.valueChanged.emit({ value: event.target.value, name: this.name });\n  }\n\n  @RegisterComponent<NylasLocationComponent, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-location-component',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    const locationOptions = [\n      { value: 'none', label: 'None' },\n      { value: 'custom', label: 'Custom location' },\n    ];\n    const icons = {\n      none: <location-off-icon />,\n      custom: <location-icon />,\n    };\n\n    return (\n      <Host>\n        <div class=\"nylas-event-location\">\n          <label htmlFor=\"location\">\n            Location type\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">\n                  Choose how you’ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.\n                </span>\n              </tooltip-component>\n            </span>\n          </label>\n          <div class=\"location-input\">\n            <select-dropdown withSearch={false} name=\"location\" options={locationOptions} defaultSelectedOption={locationOptions.find(i => i.value == this.selectedLocationOption)}>\n              <span slot=\"select-icon\">{icons[this.selectedLocationOption]}</span>\n            </select-dropdown>\n            {this.selectedLocationOption === 'custom' && (\n              <input type=\"text\" id=\"location\" name=\"location\" maxlength=\"1024\" value={this.location} onInput={e => this.handleChange(e)} />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-location-component.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-location-component/nylas-location-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Host, State, h, Element, Prop, Watch, Event, EventEmitter, Listen } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-location-component` component is a form input for the description of an event.\n * @part nel - The event location container\n * @part nel__location - The event location input\n * @part nel__dropdown - The dropdown container\n * @part nel__dropdown-button - The dropdown button\n * @part nel__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-location-component',\n  styleUrl: 'nylas-location-component.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasLocationComponent {\n  @Prop() eventLocation?: string;\n  @State() location: string = this.eventLocation ?? '';\n  @State() selectedLocationOption: string = this.eventLocation ? 'custom' : 'none';\n  @AttachInternals() internals!: ElementInternals;\n  @Element() host!: HTMLElement;\n  @Prop() name: string = 'location';\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-location-component', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n  @Watch('eventLocation')\n  eventLocationChangedHandler(newValue: string, oldValue: string) {\n    debug('nylas-location-component', 'eventLocationChangedHandler', newValue);\n    if (newValue === oldValue) {\n      return;\n    }\n    this.selectedLocationOption = newValue ? 'custom' : 'none';\n  }\n\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n  }>;\n\n  connectedCallback() {\n    debug('nylas-location-component', 'connectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-location-component', 'componentWillLoad');\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-location-component', 'componentDidLoad');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-location-component', 'disconnectedCallback');\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string }>) {\n    this.selectedLocationOption = event.detail.value;\n    if (this.selectedLocationOption === 'none') {\n      this.location = '';\n      this.setFormValue('', 'location');\n      this.valueChanged.emit({ value: '', name: this.name });\n    }\n  }\n\n  setFormValue(value: string, name: string) {\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(value, name);\n    }\n  }\n\n  handleChange(event) {\n    this.location = event.target.value;\n    this.setFormValue(event.target.value, 'location');\n    this.valueChanged.emit({ value: event.target.value, name: this.name });\n  }\n\n  @RegisterComponent<NylasLocationComponent, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-location-component',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    const locationOptions = [\n      { value: 'none', label: 'None' },\n      { value: 'custom', label: 'Custom location' },\n    ];\n    const icons = {\n      none: <location-off-icon />,\n      custom: <location-icon />,\n    };\n\n    return (\n      <Host>\n        <div class=\"nylas-event-location\" part=\"nel\">\n          <label htmlFor=\"location\">\n            Location type\n            <span class=\"label-icon\">\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">\n                  Choose how you’ll meet with the participants at the scheduled time. Pick from available conferencing options or add a custom location.\n                </span>\n              </tooltip-component>\n            </span>\n          </label>\n          <div class=\"location-input\">\n            <select-dropdown\n              withSearch={false}\n              name=\"location\"\n              options={locationOptions}\n              defaultSelectedOption={locationOptions.find(i => i.value == this.selectedLocationOption)}\n              exportparts=\"sd__dropdown: nel__dropdown, sd__dropdown-button: nel__dropdown-button, sd__dropdown-content: nel__dropdown-content\"\n            >\n              <span slot=\"select-icon\">{icons[this.selectedLocationOption]}</span>\n            </select-dropdown>\n            {this.selectedLocationOption === 'custom' && (\n              <input type=\"text\" part=\"nel__location\" id=\"location\" name=\"location\" maxlength=\"1024\" value={this.location} onInput={e => this.handleChange(e)} />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-min-cancellation-notice/nylas-min-cancellation-notice.css

@@ -0,0 +1,46 @@
+:host {
+  --nylas-primary: #2563eb;
+  --nylas-error: #cc4841;
+  --nylas-error-pressed: #992222;
+  --nylas-wraning: #f06c00;
+  --nylas-success: #16a392;
+  --nylas-info: #2b8fc2;
+  --nylas-base-0: #ffffff;
+  --nylas-base-25: #fcfcfd;
+  --nylas-base-50: #f8f9fc;
+  --nylas-base-100: #eaecf5;
+  --nylas-base-200: #d5d9eb;
+  --nylas-base-300: #b3b8d8;
+  --nylas-base-400: #717bbc;
+  --nylas-base-500: #4e5ba6;
+  --nylas-base-600: #3e4784;
+  --nylas-base-700: #263f72;
+  --nylas-base-800: #293056;
+  --nylas-base-900: #101323;
+  --nylas-base-950: #0e101b;
+  --nylas-border-radius: 0.25rem;
+  --nylas-border-radius-2x: 0.5rem;
+  --nylas-border-radius-3x: 0.75rem;
+  --nylas-font-family: "Inter", sans-serif;
+}
+
+.nylas-min-cancellation-notice {
+  display: flex;
+  justify-content: space-between;
+  font-family: var(--nylas-font-family);
+}
+.nylas-min-cancellation-notice label {
+  display: flex;
+  align-items: center;
+  color: var(--nylas-base-800);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%; /* 21px */
+}
+.nylas-min-cancellation-notice label span.label-icon {
+  margin-left: 4px;
+}
+.nylas-min-cancellation-notice label span.label-icon tooltip-component {
+  display: flex;
+}