@spw-ds/spw-stencil-library 1.8.0 → 1.9.0

package/dist/collection/components/spw-date-picker/spw-date-picker.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .qs-datepicker-container{font-size:1rem;font-family:sans-serif;color:#000;position:absolute;width:15.625em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:9001;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid grey;border-radius:.263921875em;overflow:hidden;background:#fff;-webkit-box-shadow:0 1.25em 1.25em -.9375em rgba(0,0,0,.3);box-shadow:0 1.25em 1.25em -.9375em rgba(0,0,0,.3)}.qs-datepicker-container *{-webkit-box-sizing:border-box;box-sizing:border-box}.qs-centered{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.qs-hidden{display:none}.qs-overlay{position:absolute;top:0;left:0;background:rgba(0,0,0,.75);color:#fff;width:100%;height:100%;padding:.5em;z-index:1;opacity:1;-webkit-transition:opacity .3s;transition:opacity .3s;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.qs-overlay.qs-hidden{opacity:0;z-index:-1}.qs-overlay .qs-overlay-year{background:rgba(0,0,0,0);border:none;border-bottom:1px solid #fff;border-radius:0;color:#fff;font-size:.875em;padding:.25em 0;width:80%;text-align:center;margin:0 auto;display:block}.qs-overlay .qs-overlay-year::-webkit-inner-spin-button{-webkit-appearance:none}.qs-overlay .qs-close{padding:.5em;cursor:pointer;position:absolute;top:0;right:0}.qs-overlay .qs-submit{border:1px solid #fff;border-radius:.263921875em;padding:.5em;margin:0 auto auto;cursor:pointer;background:hsla(0,0%,50.2%,.4)}.qs-overlay .qs-submit.qs-disabled{color:grey;border-color:grey;cursor:not-allowed}.qs-overlay .qs-overlay-month-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.qs-overlay .qs-overlay-month{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:calc(100% / 3);cursor:pointer;opacity:.5;-webkit-transition:opacity .15s;transition:opacity .15s}.qs-overlay .qs-overlay-month.active,.qs-overlay .qs-overlay-month:hover{opacity:1}.qs-controls{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;background:#d3d3d3;-webkit-filter:blur(0);filter:blur(0);-webkit-transition:-webkit-filter .3s;transition:-webkit-filter .3s;transition:filter .3s;transition:filter .3s, -webkit-filter .3s}.qs-controls.qs-blur{-webkit-filter:blur(5px);filter:blur(5px)}.qs-arrow{height:1.5625em;width:1.5625em;position:relative;cursor:pointer;border-radius:.263921875em;-webkit-transition:background .15s;transition:background .15s}.qs-arrow:hover.qs-left:after{border-right-color:#000}.qs-arrow:hover.qs-right:after{border-left-color:#000}.qs-arrow:hover{background:rgba(0,0,0,.1)}.qs-arrow:after{content:"";border:.390625em solid rgba(0,0,0,0);position:absolute;top:50%;-webkit-transition:border .2s;transition:border .2s}.qs-arrow.qs-left:after{border-right-color:grey;right:50%;-webkit-transform:translate(25%,-50%);-ms-transform:translate(25%,-50%);transform:translate(25%,-50%)}.qs-arrow.qs-right:after{border-left-color:grey;left:50%;-webkit-transform:translate(-25%,-50%);-ms-transform:translate(-25%,-50%);transform:translate(-25%,-50%)}.qs-month-year{font-weight:700;-webkit-transition:border .2s;transition:border .2s;border-bottom:1px solid rgba(0,0,0,0)}.qs-month-year:not(.qs-disabled-year-overlay){cursor:pointer}.qs-month-year:not(.qs-disabled-year-overlay):hover{border-bottom:1px solid grey}.qs-month-year:active:focus,.qs-month-year:focus{outline:none}.qs-month{padding-right:.5ex}.qs-year{padding-left:.5ex}.qs-squares{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:.3125em;-webkit-filter:blur(0);filter:blur(0);-webkit-transition:-webkit-filter .3s;transition:-webkit-filter .3s;transition:filter .3s;transition:filter .3s, -webkit-filter .3s}.qs-squares.qs-blur{-webkit-filter:blur(5px);filter:blur(5px)}.qs-square{width:calc(100% / 7);height:1.5625em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;-webkit-transition:background .1s;transition:background .1s;border-radius:.263921875em}.qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover{background:orange}.qs-current{font-weight:700;text-decoration:underline}.qs-active,.qs-range-end,.qs-range-start{background:#add8e6}.qs-range-start:not(.qs-range-6){border-top-right-radius:0;border-bottom-right-radius:0}.qs-range-middle{background:#d4ebf2}.qs-range-middle:not(.qs-range-0):not(.qs-range-6){border-radius:0}.qs-range-middle.qs-range-0{border-top-right-radius:0;border-bottom-right-radius:0}.qs-range-end:not(.qs-range-0),.qs-range-middle.qs-range-6{border-top-left-radius:0;border-bottom-left-radius:0}.qs-disabled,.qs-outside-current-month{opacity:.2}.qs-disabled{cursor:not-allowed}.qs-day,.qs-empty{cursor:default}.qs-day{font-weight:700;color:grey}.qs-event{position:relative}.qs-event:after{content:"";position:absolute;width:.46875em;height:.46875em;border-radius:50%;background:#07f;bottom:0;right:0}
 
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
@@ -380,12 +381,19 @@ template {
 :host {
   display: block;
   font-family: inherit;
+  /** @prop --spw-input-height: Hauteur du champ de saisie */
   --spw-input-height: 40px;
+  /** @prop --spw-input-padding: Padding interne du champ de saisie */
   --spw-input-padding: 0 12px;
+  /** @prop --spw-input-text-align: Alignement du texte dans le champ */
   --spw-input-text-align: left;
+  /** @prop --spw-input-font-size: Taille de police du champ de saisie */
   --spw-input-font-size: 16px;
+  /** @prop --spw-input-radius: Rayon de bordure du champ */
   --spw-input-radius: 4px;
+  /** @prop --spw-input-icon-search-color: Couleur de l'icône de recherche */
   --spw-input-icon-search-color: var(--spw-color-themes-grey-grey-900);
+  /** @prop --spw-input-border: Couleur de la bordure du champ */
   --spw-input-border: var(--spw-color-themes-grey-grey-800);
 }
 

package/dist/collection/components/spw-date-picker/spw-date-picker.js

@@ -42,12 +42,47 @@ export class SpwDatePicker {
         this.range = false;
         /** Permet de définir l'input de début pour un range */
         this.isStart = false;
+        /** Utilise un positionnement fixed pour le calendrier si nécessité de sortir du contexte (utile dans une modal avec overflow hidden) */
+        this.fixedCalendar = false;
         this.isOpen = false;
         this.hasError = false;
         this.internalValue = '';
         this.isClearIconVisible = false;
         this.lastInputValue = '';
         this.isDeleting = false;
+        this.parentScrollContainer = null;
+        this.updateCalendarPosition = () => {
+            var _a;
+            if (!this.fixedCalendar || !((_a = this.datepickerInstance) === null || _a === void 0 ? void 0 : _a.calendarContainer) || !this.inputElement)
+                return;
+            const inputRect = this.inputElement.getBoundingClientRect();
+            const calendarEl = this.datepickerInstance.calendarContainer;
+            const calendarHeight = calendarEl.offsetHeight || 320;
+            const viewportHeight = window.innerHeight;
+            // Déterminer si on ouvre vers le haut ou le bas
+            const spaceBelow = viewportHeight - inputRect.bottom;
+            const spaceAbove = inputRect.top;
+            const openAbove = spaceBelow < calendarHeight && spaceAbove > spaceBelow;
+            let top;
+            if (openAbove) {
+                top = inputRect.top - calendarHeight - 6;
+            }
+            else {
+                top = inputRect.bottom + 6;
+            }
+            // Positionner horizontalement selon la prop position
+            let left;
+            if (this.position === 'tr' || this.position === 'br') {
+                left = inputRect.right - calendarEl.offsetWidth;
+            }
+            else {
+                left = inputRect.left;
+            }
+            calendarEl.style.position = 'fixed';
+            calendarEl.style.top = `${top}px`;
+            calendarEl.style.left = `${left}px`;
+            calendarEl.style.zIndex = '9999';
+        };
         this.handleMaskedInput = (event) => {
             const target = event.target;
             const newValue = target.value;
@@ -247,13 +282,6 @@ export class SpwDatePicker {
         this.defaultValue = this.value;
         this.isClearIconVisible = this.isClear && !!this.value;
     }
-    connectedCallback() {
-        if (!this.datepickerInstance && this.inputElement) {
-            requestAnimationFrame(() => {
-                this.initializeDatepicker();
-            });
-        }
-    }
     componentDidLoad() {
         var _a;
         this.initializeDatepicker();
@@ -269,6 +297,17 @@ export class SpwDatePicker {
         }
         this.internals.setFormValue(this.value ? this.value : null);
     }
+    connectedCallback() {
+        if (!this.datepickerInstance && this.inputElement) {
+            requestAnimationFrame(() => {
+                this.initializeDatepicker();
+            });
+        }
+        if (this.fixedCalendar) {
+            window.addEventListener('scroll', this.updateCalendarPosition, true);
+            window.addEventListener('resize', this.updateCalendarPosition);
+        }
+    }
     disconnectedCallback() {
         if (this.datepickerInstance && typeof this.datepickerInstance.remove === 'function') {
             setTimeout(() => {
@@ -278,6 +317,79 @@ export class SpwDatePicker {
                 }
             }, 100);
         }
+        if (this.fixedCalendar) {
+            window.removeEventListener('scroll', this.updateCalendarPosition, true);
+            window.removeEventListener('resize', this.updateCalendarPosition);
+            this.cleanupParentScrollListener();
+        }
+    }
+    findParentComponent() {
+        if (!this.fixedCalendarParent)
+            return null;
+        let current = this.el;
+        while (current) {
+            if (current instanceof HTMLElement && current.tagName.toLowerCase() === this.fixedCalendarParent.toLowerCase()) {
+                return current;
+            }
+            if (current.parentElement) {
+                current = current.parentElement;
+            }
+            else {
+                const rootNode = current.getRootNode();
+                if (rootNode instanceof ShadowRoot) {
+                    current = rootNode.host;
+                }
+                else {
+                    break;
+                }
+            }
+        }
+        return null;
+    }
+    findScrollContainerInShadowRoot(parent) {
+        const shadowRoot = parent.shadowRoot;
+        if (!shadowRoot)
+            return null;
+        const elements = shadowRoot.querySelectorAll('*');
+        let deepestScrollContainer = null;
+        let maxDepth = -1;
+        for (const el of Array.from(elements)) {
+            const htmlEl = el;
+            const style = window.getComputedStyle(htmlEl);
+            const hasOverflow = style.overflow === 'auto' || style.overflow === 'scroll' || style.overflowY === 'auto' || style.overflowY === 'scroll';
+            if (hasOverflow) {
+                let depth = 0;
+                let node = el;
+                while (node && node !== shadowRoot) {
+                    depth++;
+                    node = node.parentNode;
+                }
+                if (depth > maxDepth) {
+                    maxDepth = depth;
+                    deepestScrollContainer = htmlEl;
+                }
+            }
+        }
+        return deepestScrollContainer;
+    }
+    ensureParentScrollListener() {
+        if (!this.fixedCalendarParent || !this.fixedCalendar)
+            return;
+        if (this.parentScrollContainer)
+            return;
+        const parentComponent = this.findParentComponent();
+        if (parentComponent) {
+            this.parentScrollContainer = this.findScrollContainerInShadowRoot(parentComponent);
+            if (this.parentScrollContainer) {
+                this.parentScrollContainer.addEventListener('scroll', this.updateCalendarPosition);
+            }
+        }
+    }
+    cleanupParentScrollListener() {
+        if (this.parentScrollContainer) {
+            this.parentScrollContainer.removeEventListener('scroll', this.updateCalendarPosition);
+            this.parentScrollContainer = null;
+        }
     }
     watchValue(newValue) {
         if (this.datepickerInstance && newValue) {
@@ -678,6 +790,12 @@ export class SpwDatePicker {
             onShow: () => {
                 this.isOpen = true;
                 this.datePickerOpen.emit();
+                if (this.fixedCalendar) {
+                    this.ensureParentScrollListener();
+                    requestAnimationFrame(() => {
+                        this.updateCalendarPosition();
+                    });
+                }
                 setTimeout(() => {
                     this.setupCalendarNavigation();
                     this.highlightRangeInCalendar();
@@ -790,7 +908,7 @@ export class SpwDatePicker {
             'spw-date-picker--is-clear': this.isClearIconVisible,
         };
         const errorMessage = this.error || this.internalError;
-        return (h(Host, { key: '70bc9908337a34fce7a364e15343231c7cddfb3e' }, h("div", { key: '22eebe0dd218243c5b64e07039816788c5fe4366', class: containerClass }, this.label && (h("spw-field-label", { key: 'b05bbd092cc3e170f5d4111b9cb9fc5791066109', label: this.label, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: 'a3a9cb74cb09f307472a7a41beb8937d095a3477', class: "spw-date-picker__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'b31e2486767d521c3a9b6d1b7462af85fdbd2e60', class: "spw-date-picker__input-container" }, h("input", { key: '7f5c7a4168768a6828f198973d180e1f6600532a', ref: el => (this.inputElement = el), id: this.uniqueId, type: "text", class: inputClass, value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, required: this.required, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, "aria-label": this.accAriaLabel || this.label || this.name, "aria-describedby": this.assistiveText || errorMessage ? `${this.uniqueId}-help ${this.uniqueId}-error` : undefined, "aria-invalid": this.hasError }), h("div", { key: '863780d4d9a6b3f07e17977125237809166d835f', class: "spw-date-picker__icons" }, this.isClearIconVisible && (h("span", { key: 'c25cd0e5a75ef062ef50b2db3dfa33e40c075f9b', class: "spw-date-picker__clear", onClick: this.handleClear }, h("spw-icon", { key: '4761fbc6c02cc8200c90882a8dd556dae77d9313', class: "spw-date-picker__icon spw-date-picker__icon--clear", icon: "fa-xmark" }))), h("span", { key: 'b35d76a9ca1b914b0bec648692e7939dc1ab4cb9', class: "spw-date-picker__calendar-trigger", onMouseDown: this.handleCalendarIconMouseDown, onClick: this.handleCalendarIconClick }, h("spw-icon", { key: 'b28190ea0b55dcf994fd023f6c7c6c003710dea9', icon: "fa-calendar", class: "spw-date-picker__icon spw-date-picker__icon--calendar" })))), this.error && (h("spw-field-message", { key: '2fb10c2981460f879c7d66fd6fb0439c38d7929c', variant: "error", showIcon: this.showErrorIcon }, this.error)), this.hint && (h("spw-field-message", { key: '8d1d51c87b3fc336de054c8bfe5780b0fefb31e8', variant: "hint", showIcon: this.showHintIcon }, this.hint)), this.success && (h("spw-field-message", { key: '2f73dff0acc8048983c6e55ce239e575e91a9440', variant: "success", showIcon: this.showSuccessIcon }, this.success)), this.warning && (h("spw-field-message", { key: 'f4a9746012910672908fcb188fd0fe4ed69ef352', variant: "warning", showIcon: this.showWarningIcon }, this.warning)))));
+        return (h(Host, { key: '0166db15ed91f3a679b201ed8cd170efb087526b' }, h("div", { key: 'eb2f7bfbc6dca0217a1b2f8b6208e5a9ebd89b12', class: containerClass }, this.label && (h("spw-field-label", { key: '36f9ee171649fe3ce83554b51c05d6b968839faf', label: this.label, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.assistiveText && (h("spw-field-message", { key: '9e3c3fa46e2d953ce4f4746554e73bbc39f79df1', class: "spw-date-picker__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'c8258b0a85f4f9137d3ea1c7fd3887afac6cbb3f', class: "spw-date-picker__input-container" }, h("input", { key: 'a18d797519d70a5c6ba8d14167462a5cd24b5a23', ref: el => (this.inputElement = el), id: this.uniqueId, type: "text", class: inputClass, value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, required: this.required, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, "aria-label": this.accAriaLabel || this.label || this.name, "aria-describedby": this.assistiveText || errorMessage ? `${this.uniqueId}-help ${this.uniqueId}-error` : undefined, "aria-invalid": this.hasError }), h("div", { key: '5413c1530c9de454e63b483d8030f2d779645816', class: "spw-date-picker__icons" }, this.isClearIconVisible && (h("span", { key: '70abf2032f4191e1bbe27d2ca9b3b5ccfadea4c1', class: "spw-date-picker__clear", onClick: this.handleClear }, h("spw-icon", { key: '1e12acf218589748f95a743e826a754b04f4b4cc', class: "spw-date-picker__icon spw-date-picker__icon--clear", icon: "fa-xmark" }))), h("span", { key: '1ce34e9fcdbf5cf823e57d73abf96f510f4e97d3', class: "spw-date-picker__calendar-trigger", onMouseDown: this.handleCalendarIconMouseDown, onClick: this.handleCalendarIconClick }, h("spw-icon", { key: '0e4a84c25a2e4c407f8c5ce37dfff3686acad60e', icon: "fa-calendar", class: "spw-date-picker__icon spw-date-picker__icon--calendar" })))), this.error && (h("spw-field-message", { key: '196f3d4c2931c329002e1fb342dfb30395dd4fe9', variant: "error", showIcon: this.showErrorIcon }, this.error)), this.hint && (h("spw-field-message", { key: '2f1451d32f226cc9dddc68940e8c527aa6da28dd', variant: "hint", showIcon: this.showHintIcon }, this.hint)), this.success && (h("spw-field-message", { key: 'bfb08cdd69d1b95ba095a6947533ab99b9b087a4', variant: "success", showIcon: this.showSuccessIcon }, this.success)), this.warning && (h("spw-field-message", { key: '9595c15d7a17ecfb1f3e22a20fab37b0b50f2af4', variant: "warning", showIcon: this.showWarningIcon }, this.warning)))));
     }
     static get is() { return "spw-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -1415,6 +1533,45 @@ export class SpwDatePicker {
                 "reflect": false,
                 "attribute": "is-start",
                 "defaultValue": "false"
+            },
+            "fixedCalendar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Utilise un positionnement fixed pour le calendrier si n\u00E9cessit\u00E9 de sortir du contexte (utile dans une modal avec overflow hidden)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fixed-calendar",
+                "defaultValue": "false"
+            },
+            "fixedCalendarParent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tag name du composant parent contenant le scroll (ex: 'spw-modal'). Le composant remontera les parents pour trouver ce composant et \u00E9couter son scroll interne."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fixed-calendar-parent"
             }
         };
     }