npm - @spw-ds/spw-stencil-library - Versions diffs - 1.2.3 → 1.2.4 - Mend

@spw-ds/spw-stencil-library 1.2.3 → 1.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (661) hide show

package/dist/spw-stencil-library/spw-file-upload.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-file-upload.entry.esm.js","sources":["src/components/spw-file-upload/spw-file-upload.scss?tag=spw-file-upload&encapsulation=shadow","src/components/spw-file-upload/spw-file-upload.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-file-upload {\n display: block;\n position: relative;\n\n &__wrapper {\n &--error {\n border-color: #ff4d4d;\n background-color: #ffe6e6;\n }\n\n &--dragging {\n background-color: #e0f7fa;\n border-color: #00acc1;\n }\n }\n\n spw-button {\n display: inline-block;\n margin-bottom: 8px;\n }\n\n &__errors {\n font-size: 14px;\n color: var(--spw-colors-dark-themes-red-red-500);\n font-weight: 600;\n li {\n margin-top: 16px;\n }\n &--warning {\n color: var(--spw-color-themes-grey-grey-800);\n font-weight: 400;\n }\n }\n\n &__hints {\n font-size: 14px;\n color: var(--spw-color-themes-grey-grey-600);\n margin-top: 16px;\n }\n}\n\n.spw-file-upload__dropzone {\n cursor: pointer;\n color: #555;\n background: var(--spw-colors-dark-themes-blue-grey-blue-grey-50);\n padding: 20px;\n border-radius: 8px;\n border: 1px dashed #333;\n font-weight: bold;\n text-align: center;\n\n &:not(.spw-file-upload--disabled):hover {\n outline: 4px solid var(--spw-color-themes-grey-grey-300);\n }\n\n &:not(.spw-file-upload__wrapper--disabled):focus-visible,\n &:not(.spw-file-upload__wrapper--disabled):active,\n &:not(.spw-file-upload__wrapper--disabled):focus-within {\n outline: 2px solid var(--spw-ds-focus);\n }\n\n &-link {\n color: var(--spw-ds-primary);\n text-decoration: underline;\n &:hover {\n text-decoration: none;\n }\n .spw-file-upload__wrapper--disabled & {\n color: inherit;\n text-decoration: none;\n }\n }\n\n .spw-file-upload__wrapper--disabled & {\n cursor: not-allowed;\n background: var(--spw-color-themes-grey-grey-100);\n color: var(--spw-color-themes-grey-grey-400);\n border-color: var(--spw-color-themes-grey-grey-300);\n outline: none !important;\n }\n\n .spw-file-upload--is-dragging & {\n background: var(--spw-colors-dark-themes-blue-grey-blue-grey-200);\n }\n}\n\n.spw-file-upload__info {\n &-list {\n margin-top: 16px;\n border-top: 1px solid #eee;\n\n li {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n justify-content: space-between;\n align-items: center;\n padding: 16px 8px;\n border-bottom: 1px solid #eee;\n color: var(--spw-color-themes-grey-grey-900);\n font-size: 14px;\n\n @include breakpoint(md) {\n flex-wrap: nowrap;\n gap: 16px;\n }\n }\n\n &-actions {\n display: flex;\n gap: 8px;\n @include breakpoint(md) {\n gap: 16px;\n }\n }\n\n &-delete {\n color: inherit;\n &:hover {\n text-decoration: none;\n }\n }\n }\n}\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Method, AttachInternals } from '@stencil/core';\nimport { formatFileSize } from '@utils/utils';\n\n@Component({\n tag: 'spw-file-upload',\n styleUrl: 'spw-file-upload.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class SpwFileUpload {\n private inputElement: HTMLInputElement;\n\n @Element() el: HTMLSpwFileUploadElement;\n\n /** Indique si le champ est désactivé, rendant le téléversement de fichiers non disponible /\n @Prop() disabled: boolean = false;\n /* Indique s'il y a une erreur visuelle associée au composant de téléversement de fichiers /\n @Prop() error: boolean = false;\n /* Nom de l'élément utilisé dans les formulaires pour associer la valeur des fichiers /\n @Prop() name: string;\n /* Valeur actuelle sélectionnée, utilisée pour les formulaires /\n @Prop() value: string;\n /* Active ou désactive la zone de dépôt pour le glisser-déposer de fichiers /\n @Prop() enableDropZone: boolean = false;\n /* Permet de téléverser plusieurs fichiers si vrai /\n @Prop() multiple: boolean = false;\n /* Types de fichiers acceptés, spécifiés sous forme de chaîne de types MIME /\n @Prop() accept: string = '';\n /* Taille maximale autorisée pour chaque fichier, en Mo /\n @Prop() maxFileSize: number = 100;\n /* Nombre maximal de fichiers pouvant être téléversés /\n @Prop() maxFiles: number = Infinity;\n\n @State() internalValue: string;\n @State() selectedFiles: File[] = [];\n @State() fileTypeErrors: string[] = [];\n @State() fileLimitErrors: string[] = [];\n @State() isDragging: boolean = false;\n @State() isMaxFilesReachedExact: boolean = false;\n\n @AttachInternals() internals: ElementInternals;\n\n /* Événement émis lorsque la sélection de fichiers change /\n @Event({ bubbles: true, composed: true }) spwFileChange: EventEmitter<{ files: File[] }>;\n\n componentWillLoad() {\n this.internalValue = this.value;\n this.maxFileSize = this.maxFileSize 1024 * 1024;\n }\n\n componentWillUpdate() {\n if (this.value !== this.internalValue) {\n this.internalValue = this.value;\n }\n }\n\n get isMaxFilesReached(): boolean {\n return this.selectedFiles.length >= this.maxFiles;\n }\n\n private handleFileChange(event: Event) {\n const input = event.target as HTMLInputElement;\n const files = input.files ? Array.from(input.files) : [];\n this.processFiles(files);\n }\n\n private processFiles(files: File[]) {\n this.fileTypeErrors = [];\n this.fileLimitErrors = [];\n this.isMaxFilesReachedExact = false;\n\n if (!this.multiple) {\n this.selectedFiles = [];\n files = files.slice(0, 1);\n }\n\n const validFiles = files.filter(file => {\n const isFileAccepted = this.isFileAccepted(file);\n const isFileSizeValid = this.isFileSizeValid(file);\n\n if (!isFileAccepted && !isFileSizeValid) {\n this.fileTypeErrors.push(`${file.name} n’a pas été pris en compte car le format n’est pas autorisé et la limite de poids est dépassée.`);\n return false;\n } else if (!isFileAccepted) {\n this.fileTypeErrors.push(`${file.name} n'a pas été pris en compte car le format n'est pas autorisé.`);\n return false;\n } else if (!isFileSizeValid) {\n this.fileTypeErrors.push(`${file.name} n'a pas été pris en compte car il dépasse la taille maximale autorisée.`);\n return false;\n }\n\n return true;\n });\n\n if (this.selectedFiles.length + validFiles.length >= this.maxFiles) {\n const allowedFiles = this.maxFiles - this.selectedFiles.length;\n\n if (this.selectedFiles.length + validFiles.length === this.maxFiles) {\n this.isMaxFilesReachedExact = true;\n this.fileLimitErrors.push('Vous avez atteint la limite autorisée de fichiers.');\n } else {\n validFiles.splice(allowedFiles);\n const maxFilesText = this.maxFiles > 1 ? 'fichiers' : 'fichier';\n this.fileLimitErrors.push(`Vous ne pouvez pas télécharger plus de ${this.maxFiles} ${maxFilesText}.`);\n }\n }\n\n this.selectedFiles = [...this.selectedFiles, ...validFiles];\n\n this.spwFileChange.emit({ files: this.selectedFiles });\n this.updateFormValue();\n }\n\n private isFileAccepted(file: File): boolean {\n if (!this.accept) return true;\n const acceptedTypes = this.accept.split(',').map(type => type.trim());\n return acceptedTypes.includes(file.type) \|\| acceptedTypes.some(type => file.name.endsWith(type));\n }\n\n private isFileSizeValid(file: File): boolean {\n return file.size <= this.maxFileSize;\n }\n\n private updateFormValue() {\n if (this.selectedFiles.length > 0) {\n const formData = new FormData();\n this.selectedFiles.forEach((file, index) => {\n formData.append(`${this.name}[${index}]`, file);\n });\n this.internalValue = formData.toString();\n this.internals.setFormValue(formData);\n } else {\n this.internalValue = '';\n this.internals.setFormValue(null);\n }\n }\n\n /** Réinitialise le champ de téléchargement de fichiers /\n @Method()\n async resetInput() {\n this.inputElement.value = '';\n this.selectedFiles = [];\n this.fileLimitErrors = [];\n this.fileTypeErrors = [];\n this.updateFormValue();\n }\n\n formResetCallback() {\n this.resetInput();\n }\n\n private handleDragOver(event: DragEvent) {\n event.preventDefault();\n if (!this.disabled && this.enableDropZone && !this.isMaxFilesReached) {\n this.isDragging = true;\n }\n }\n\n private handleDragLeave() {\n if (!this.disabled && this.enableDropZone) {\n this.isDragging = false;\n }\n }\n\n private handleDrop(event: DragEvent) {\n event.preventDefault();\n if (!this.disabled && this.enableDropZone && !this.isMaxFilesReached) {\n this.isDragging = false;\n const files = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : [];\n this.processFiles(files);\n }\n }\n\n private removeFile(index: number) {\n this.selectedFiles = this.selectedFiles.filter((_, i) => i !== index);\n this.fileLimitErrors = [];\n this.updateFormValue();\n }\n\n private handleKeydown(event) {\n if ((event.key === ' ' \|\| event.key === 'Enter') && !this.isMaxFilesReached) {\n event.preventDefault();\n !this.disabled && this.inputElement.click();\n }\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-file-upload__wrapper': true,\n 'spw-file-upload__wrapper--disabled': this.disabled \|\| this.isMaxFilesReached,\n 'spw-file-upload__wrapper--error': this.error,\n 'spw-file-upload--has-dropzone': this.enableDropZone,\n 'spw-file-upload--is-dragging': this.isDragging,\n };\n }\n\n private get hintsMessages(): string[] {\n const maxSizeInMB = this.maxFileSize / (1024 1024);\n const acceptedFormats = this.accept ? this.accept : 'tous les formats';\n const messages = [];\n let message = `Taille maximale par fichier : ${maxSizeInMB} Mo`;\n\n if (this.multiple && this.maxFiles !== Infinity) {\n const maxFilesText = this.maxFiles > 1 ? 'fichiers' : 'fichier';\n message += ` - ${this.maxFiles} ${maxFilesText} maximum.`;\n } else {\n message += '.';\n }\n\n messages.push(message);\n messages.push(`Formats autorisés : ${acceptedFormats}.`);\n\n return messages;\n }\n\n render() {\n const inputTextNoDrop = this.multiple ? 'Choisir vos fichiers...' : 'Choisir votre fichier...';\n const inputTextDrop = this.multiple ? 'Déposez vos fichiers ici' : 'Déposez votre fichier ici';\n\n return (\n <div class={this.elementClass} onDragOver={this.handleDragOver.bind(this)} onDragLeave={this.handleDragLeave.bind(this)} onDrop={this.handleDrop.bind(this)}>\n <input\n type=\"file\"\n ref={el => (this.inputElement = el)}\n onChange={this.handleFileChange.bind(this)}\n name={this.name}\n multiple={this.multiple}\n accept={this.accept}\n style={{ display: 'none' }}\n disabled={this.isMaxFilesReached}\n />\n {this.enableDropZone ? (\n <div\n tabindex={this.disabled \|\| this.isMaxFilesReached ? -1 : 0}\n onKeyDown={this.handleKeydown.bind(this)}\n onClick={() => !this.disabled && !this.isMaxFilesReached && this.inputElement.click()}\n class=\"spw-file-upload__dropzone\"\n >\n {inputTextDrop} ou <span class=\"spw-file-upload__dropzone-link\">choisissez sur votre ordinateur...</span>\n </div>\n ) : (\n <spw-button variant=\"secondary\" onClick={() => !this.disabled && !this.isMaxFilesReached && this.inputElement.click()} disabled={this.disabled \|\| this.isMaxFilesReached}>\n {inputTextNoDrop}\n </spw-button>\n )}\n <div class=\"spw-file-upload__hints\">\n {this.hintsMessages.length > 0 && (\n <ul>\n {this.hintsMessages.map((message, index) => (\n <li key={index}>{message}</li>\n ))}\n </ul>\n )}\n </div>\n <div class=\"spw-file-upload__info\">\n {this.selectedFiles.length > 0 ? (\n <ul class=\"spw-file-upload__info-list\">\n {this.selectedFiles.map((file, index) => (\n <li key={index}>\n <span class=\"spw-file-upload__info-list-name\">{file.name}</span>\n <div class=\"spw-file-upload__info-list-actions\">\n <span class=\"spw-tw-mr-2\">{formatFileSize(file.size)}</span>\n <a\n class=\"spw-file-upload__info-list-delete\"\n href=\"#\"\n onClick={e => {\n e.preventDefault();\n this.removeFile(index);\n }}\n >\n Supprimer\n </a>\n </div>\n </li>\n ))}\n </ul>\n ) : (\n ''\n )}\n {this.fileLimitErrors.length > 0 && (\n <ul class={`spw-file-upload__errors ${this.isMaxFilesReachedExact ? 'spw-file-upload__errors--warning' : ''}`}>\n {this.fileLimitErrors.map((message, index) => (\n <li key={index}>\n <spw-icon class=\"spw-tw-mr-2\" icon={this.isMaxFilesReachedExact ? 'fa-circle-exclamation' : 'fa-warning'}></spw-icon>\n {message}\n </li>\n ))}\n </ul>\n )}\n {this.fileTypeErrors.length > 0 && (\n <ul class=\"spw-file-upload__errors\">\n {this.fileTypeErrors.map((message, index) => (\n <li key={index}>\n <spw-icon class=\"spw-tw-mr-2\" icon=\"fa-warning\"></spw-icon>\n {message}\n </li>\n ))}\n </ul>\n )}\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"spw-file-upload.entry.esm.js","sources":["src/components/spw-file-upload/spw-file-upload.scss?tag=spw-file-upload&encapsulation=shadow","src/components/spw-file-upload/spw-file-upload.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-file-upload {\n display: block;\n position: relative;\n\n &__wrapper {\n &--error {\n border-color: #ff4d4d;\n background-color: #ffe6e6;\n }\n\n &--dragging {\n background-color: #e0f7fa;\n border-color: #00acc1;\n }\n }\n\n spw-button {\n display: inline-block;\n margin-bottom: 8px;\n }\n\n &__errors {\n font-size: 14px;\n color: var(--spw-colors-dark-themes-red-red-500);\n font-weight: 600;\n li {\n margin-top: 16px;\n }\n &--warning {\n color: var(--spw-color-themes-grey-grey-800);\n font-weight: 400;\n }\n }\n\n &__hints {\n font-size: 14px;\n color: var(--spw-color-themes-grey-grey-600);\n margin-top: 16px;\n }\n}\n\n.spw-file-upload__dropzone {\n cursor: pointer;\n color: #555;\n background: var(--spw-colors-dark-themes-blue-grey-blue-grey-50);\n padding: 20px;\n border-radius: 8px;\n border: 1px dashed #333;\n font-weight: bold;\n text-align: center;\n\n &:not(.spw-file-upload--disabled):hover {\n outline: 4px solid var(--spw-color-themes-grey-grey-300);\n }\n\n &:not(.spw-file-upload__wrapper--disabled):focus-visible,\n &:not(.spw-file-upload__wrapper--disabled):active,\n &:not(.spw-file-upload__wrapper--disabled):focus-within {\n outline: 2px solid var(--spw-ds-focus);\n }\n\n &-link {\n color: var(--spw-ds-primary);\n text-decoration: underline;\n &:hover {\n text-decoration: none;\n }\n .spw-file-upload__wrapper--disabled & {\n color: inherit;\n text-decoration: none;\n }\n }\n\n .spw-file-upload__wrapper--disabled & {\n cursor: not-allowed;\n background: var(--spw-color-themes-grey-grey-100);\n color: var(--spw-color-themes-grey-grey-400);\n border-color: var(--spw-color-themes-grey-grey-300);\n outline: none !important;\n }\n\n .spw-file-upload--is-dragging & {\n background: var(--spw-colors-dark-themes-blue-grey-blue-grey-200);\n }\n}\n\n.spw-file-upload__info {\n &-list {\n margin-top: 16px;\n border-top: 1px solid #eee;\n\n li {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n justify-content: space-between;\n align-items: center;\n padding: 16px 8px;\n border-bottom: 1px solid #eee;\n color: var(--spw-color-themes-grey-grey-900);\n font-size: 14px;\n\n @include breakpoint(md) {\n flex-wrap: nowrap;\n gap: 16px;\n }\n }\n\n &-actions {\n display: flex;\n gap: 8px;\n @include breakpoint(md) {\n gap: 16px;\n }\n }\n\n &-delete {\n color: inherit;\n &:hover {\n text-decoration: none;\n }\n }\n }\n}\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Method, AttachInternals } from '@stencil/core';\nimport { formatFileSize } from '@utils/utils';\n\n@Component({\n tag: 'spw-file-upload',\n styleUrl: 'spw-file-upload.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class SpwFileUpload {\n private inputElement: HTMLInputElement;\n\n @Element() el: HTMLSpwFileUploadElement;\n\n /** Indique si le champ est désactivé, rendant le téléversement de fichiers non disponible /\n @Prop() disabled: boolean = false;\n /* Indique s'il y a une erreur visuelle associée au composant de téléversement de fichiers /\n @Prop() error: boolean = false;\n /* Nom de l'élément utilisé dans les formulaires pour associer la valeur des fichiers /\n @Prop() name: string;\n /* Valeur actuelle sélectionnée, utilisée pour les formulaires /\n @Prop() value: string;\n /* Active ou désactive la zone de dépôt pour le glisser-déposer de fichiers /\n @Prop() enableDropZone: boolean = false;\n /* Permet de téléverser plusieurs fichiers si vrai /\n @Prop() multiple: boolean = false;\n /* Types de fichiers acceptés, spécifiés sous forme de chaîne de types MIME /\n @Prop() accept: string = '';\n /* Taille maximale autorisée pour chaque fichier, en Mo /\n @Prop() maxFileSize: number = 100;\n /* Nombre maximal de fichiers pouvant être téléversés /\n @Prop() maxFiles: number = Infinity;\n\n @State() internalValue: string;\n @State() selectedFiles: File[] = [];\n @State() fileTypeErrors: string[] = [];\n @State() fileLimitErrors: string[] = [];\n @State() isDragging: boolean = false;\n @State() isMaxFilesReachedExact: boolean = false;\n\n @AttachInternals() internals: ElementInternals;\n\n /* Événement émis lorsque la sélection de fichiers change /\n @Event({ bubbles: true, composed: true }) spwFileChange: EventEmitter<{ files: File[] }>;\n\n componentWillLoad() {\n this.internalValue = this.value;\n this.maxFileSize = this.maxFileSize 1024 * 1024;\n }\n\n componentWillUpdate() {\n if (this.value !== this.internalValue) {\n this.internalValue = this.value;\n }\n }\n\n get isMaxFilesReached(): boolean {\n return this.selectedFiles.length >= this.maxFiles;\n }\n\n private handleFileChange(event: Event) {\n const input = event.target as HTMLInputElement;\n const files = input.files ? Array.from(input.files) : [];\n this.processFiles(files);\n }\n\n private processFiles(files: File[]) {\n this.fileTypeErrors = [];\n this.fileLimitErrors = [];\n this.isMaxFilesReachedExact = false;\n\n if (!this.multiple) {\n this.selectedFiles = [];\n files = files.slice(0, 1);\n }\n\n const validFiles = files.filter(file => {\n const isFileAccepted = this.isFileAccepted(file);\n const isFileSizeValid = this.isFileSizeValid(file);\n\n if (!isFileAccepted && !isFileSizeValid) {\n this.fileTypeErrors.push(`${file.name} n’a pas été pris en compte car le format n’est pas autorisé et la limite de poids est dépassée.`);\n return false;\n } else if (!isFileAccepted) {\n this.fileTypeErrors.push(`${file.name} n'a pas été pris en compte car le format n'est pas autorisé.`);\n return false;\n } else if (!isFileSizeValid) {\n this.fileTypeErrors.push(`${file.name} n'a pas été pris en compte car il dépasse la taille maximale autorisée.`);\n return false;\n }\n\n return true;\n });\n\n if (this.selectedFiles.length + validFiles.length >= this.maxFiles) {\n const allowedFiles = this.maxFiles - this.selectedFiles.length;\n\n if (this.selectedFiles.length + validFiles.length === this.maxFiles) {\n this.isMaxFilesReachedExact = true;\n this.fileLimitErrors.push('Vous avez atteint la limite autorisée de fichiers.');\n } else {\n validFiles.splice(allowedFiles);\n const maxFilesText = this.maxFiles > 1 ? 'fichiers' : 'fichier';\n this.fileLimitErrors.push(`Vous ne pouvez pas télécharger plus de ${this.maxFiles} ${maxFilesText}.`);\n }\n }\n\n this.selectedFiles = [...this.selectedFiles, ...validFiles];\n\n this.spwFileChange.emit({ files: this.selectedFiles });\n this.updateFormValue();\n }\n\n private isFileAccepted(file: File): boolean {\n if (!this.accept) return true;\n const acceptedTypes = this.accept.split(',').map(type => type.trim());\n return acceptedTypes.includes(file.type) \|\| acceptedTypes.some(type => file.name.endsWith(type));\n }\n\n private isFileSizeValid(file: File): boolean {\n return file.size <= this.maxFileSize;\n }\n\n private updateFormValue() {\n if (this.selectedFiles.length > 0) {\n const formData = new FormData();\n this.selectedFiles.forEach((file, index) => {\n formData.append(`${this.name}[${index}]`, file);\n });\n this.internalValue = formData.toString();\n this.internals.setFormValue(formData);\n } else {\n this.internalValue = '';\n this.internals.setFormValue(null);\n }\n }\n\n /** Réinitialise le champ de téléchargement de fichiers /\n @Method()\n async resetInput() {\n this.inputElement.value = '';\n this.selectedFiles = [];\n this.fileLimitErrors = [];\n this.fileTypeErrors = [];\n this.updateFormValue();\n }\n\n formResetCallback() {\n this.resetInput();\n }\n\n private handleDragOver(event: DragEvent) {\n event.preventDefault();\n if (!this.disabled && this.enableDropZone && !this.isMaxFilesReached) {\n this.isDragging = true;\n }\n }\n\n private handleDragLeave() {\n if (!this.disabled && this.enableDropZone) {\n this.isDragging = false;\n }\n }\n\n private handleDrop(event: DragEvent) {\n event.preventDefault();\n if (!this.disabled && this.enableDropZone && !this.isMaxFilesReached) {\n this.isDragging = false;\n const files = event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : [];\n this.processFiles(files);\n }\n }\n\n private removeFile(index: number) {\n this.selectedFiles = this.selectedFiles.filter((_, i) => i !== index);\n this.fileLimitErrors = [];\n this.updateFormValue();\n this.spwFileChange.emit({ files: this.selectedFiles });\n }\n\n private handleKeydown(event) {\n if ((event.key === ' ' \|\| event.key === 'Enter') && !this.isMaxFilesReached) {\n event.preventDefault();\n !this.disabled && this.inputElement.click();\n }\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-file-upload__wrapper': true,\n 'spw-file-upload__wrapper--disabled': this.disabled \|\| this.isMaxFilesReached,\n 'spw-file-upload__wrapper--error': this.error,\n 'spw-file-upload--has-dropzone': this.enableDropZone,\n 'spw-file-upload--is-dragging': this.isDragging,\n };\n }\n\n private get hintsMessages(): string[] {\n const maxSizeInMB = this.maxFileSize / (1024 1024);\n const acceptedFormats = this.accept ? this.accept : 'tous les formats';\n const messages = [];\n let message = `Taille maximale par fichier : ${maxSizeInMB} Mo`;\n\n if (this.multiple && this.maxFiles !== Infinity) {\n const maxFilesText = this.maxFiles > 1 ? 'fichiers' : 'fichier';\n message += ` - ${this.maxFiles} ${maxFilesText} maximum.`;\n } else {\n message += '.';\n }\n\n messages.push(message);\n messages.push(`Formats autorisés : ${acceptedFormats}.`);\n\n return messages;\n }\n\n render() {\n const inputTextNoDrop = this.multiple ? 'Choisir vos fichiers...' : 'Choisir votre fichier...';\n const inputTextDrop = this.multiple ? 'Déposez vos fichiers ici' : 'Déposez votre fichier ici';\n\n return (\n <div class={this.elementClass} onDragOver={this.handleDragOver.bind(this)} onDragLeave={this.handleDragLeave.bind(this)} onDrop={this.handleDrop.bind(this)}>\n <input\n type=\"file\"\n ref={el => (this.inputElement = el)}\n onChange={this.handleFileChange.bind(this)}\n name={this.name}\n multiple={this.multiple}\n accept={this.accept}\n style={{ display: 'none' }}\n disabled={this.isMaxFilesReached}\n />\n {this.enableDropZone ? (\n <div\n tabindex={this.disabled \|\| this.isMaxFilesReached ? -1 : 0}\n onKeyDown={this.handleKeydown.bind(this)}\n onClick={() => !this.disabled && !this.isMaxFilesReached && this.inputElement.click()}\n class=\"spw-file-upload__dropzone\"\n >\n {inputTextDrop} ou <span class=\"spw-file-upload__dropzone-link\">choisissez sur votre ordinateur...</span>\n </div>\n ) : (\n <spw-button variant=\"secondary\" onClick={() => !this.disabled && !this.isMaxFilesReached && this.inputElement.click()} disabled={this.disabled \|\| this.isMaxFilesReached}>\n {inputTextNoDrop}\n </spw-button>\n )}\n <div class=\"spw-file-upload__hints\">\n {this.hintsMessages.length > 0 && (\n <ul>\n {this.hintsMessages.map((message, index) => (\n <li key={index}>{message}</li>\n ))}\n </ul>\n )}\n </div>\n <div class=\"spw-file-upload__info\">\n {this.selectedFiles.length > 0 ? (\n <ul class=\"spw-file-upload__info-list\">\n {this.selectedFiles.map((file, index) => (\n <li key={index}>\n <span class=\"spw-file-upload__info-list-name\">{file.name}</span>\n <div class=\"spw-file-upload__info-list-actions\">\n <span class=\"spw-tw-mr-2\">{formatFileSize(file.size)}</span>\n <a\n class=\"spw-file-upload__info-list-delete\"\n href=\"#\"\n onClick={e => {\n e.preventDefault();\n this.removeFile(index);\n }}\n >\n Supprimer\n </a>\n </div>\n </li>\n ))}\n </ul>\n ) : (\n ''\n )}\n {this.fileLimitErrors.length > 0 && (\n <ul class={`spw-file-upload__errors ${this.isMaxFilesReachedExact ? 'spw-file-upload__errors--warning' : ''}`}>\n {this.fileLimitErrors.map((message, index) => (\n <li key={index}>\n <spw-icon class=\"spw-tw-mr-2\" icon={this.isMaxFilesReachedExact ? 'fa-circle-exclamation' : 'fa-warning'}></spw-icon>\n {message}\n </li>\n ))}\n </ul>\n )}\n {this.fileTypeErrors.length > 0 && (\n <ul class=\"spw-file-upload__errors\">\n {this.fileTypeErrors.map((message, index) => (\n <li key={index}>\n <spw-icon class=\"spw-tw-mr-2\" icon=\"fa-warning\"></spw-icon>\n {message}\n </li>\n ))}\n </ul>\n )}\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,ggKAAggK;;MCS5gK,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;;;;;AAYU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAEzB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;;AAMtB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;;AAE/B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAEzB,QAAA,IAAM,CAAA,MAAA,GAAW,EAAE;;AAEnB,QAAA,IAAW,CAAA,WAAA,GAAW,GAAG;;AAEzB,QAAA,IAAQ,CAAA,QAAA,GAAW,QAAQ;AAG1B,QAAA,IAAa,CAAA,aAAA,GAAW,EAAE;AAC1B,QAAA,IAAc,CAAA,cAAA,GAAa,EAAE;AAC7B,QAAA,IAAe,CAAA,eAAA,GAAa,EAAE;AAC9B,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAC3B,QAAA,IAAsB,CAAA,sBAAA,GAAY,KAAK;AA0QjD;IAnQC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK;QAC/B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,GAAG,IAAI;;IAGnD,mBAAmB,GAAA;QACjB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,EAAE;AACrC,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK;;;AAInC,IAAA,IAAI,iBAAiB,GAAA;QACnB,OAAO,IAAI,CAAC,aAAa,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ;;AAG3C,IAAA,gBAAgB,CAAC,KAAY,EAAA;AACnC,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;QAC9C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE;AACxD,QAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;;AAGlB,IAAA,YAAY,CAAC,KAAa,EAAA;AAChC,QAAA,IAAI,CAAC,cAAc,GAAG,EAAE;AACxB,QAAA,IAAI,CAAC,eAAe,GAAG,EAAE;AACzB,QAAA,IAAI,CAAC,sBAAsB,GAAG,KAAK;AAEnC,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,aAAa,GAAG,EAAE;YACvB,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;;QAG3B,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,IAAG;YACrC,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YAChD,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;AAElD,YAAA,IAAI,CAAC,cAAc,IAAI,CAAC,eAAe,EAAE;gBACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAG,EAAA,IAAI,CAAC,IAAI,CAAkG,gGAAA,CAAA,CAAC;AACxI,gBAAA,OAAO,KAAK;;iBACP,IAAI,CAAC,cAAc,EAAE;gBAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAG,EAAA,IAAI,CAAC,IAAI,CAA+D,6DAAA,CAAA,CAAC;AACrG,gBAAA,OAAO,KAAK;;iBACP,IAAI,CAAC,eAAe,EAAE;gBAC3B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAG,EAAA,IAAI,CAAC,IAAI,CAA0E,wEAAA,CAAA,CAAC;AAChH,gBAAA,OAAO,KAAK;;AAGd,YAAA,OAAO,IAAI;AACb,SAAC,CAAC;AAEF,QAAA,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClE,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM;AAE9D,YAAA,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,KAAK,IAAI,CAAC,QAAQ,EAAE;AACnE,gBAAA,IAAI,CAAC,sBAAsB,GAAG,IAAI;AAClC,gBAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,oDAAoD,CAAC;;iBAC1E;AACL,gBAAA,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC;AAC/B,gBAAA,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,UAAU,GAAG,SAAS;AAC/D,gBAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA,uCAAA,EAA0C,IAAI,CAAC,QAAQ,CAAA,CAAA,EAAI,YAAY,CAAA,CAAA,CAAG,CAAC;;;AAIzG,QAAA,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,UAAU,CAAC;AAE3D,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;QACtD,IAAI,CAAC,eAAe,EAAE;;AAGhB,IAAA,cAAc,CAAC,IAAU,EAAA;QAC/B,IAAI,CAAC,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,IAAI;QAC7B,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QACrE,OAAO,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;AAG1F,IAAA,eAAe,CAAC,IAAU,EAAA;AAChC,QAAA,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW;;IAG9B,eAAe,GAAA;QACrB,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;AACjC,YAAA,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE;YAC/B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACzC,gBAAA,QAAQ,CAAC,MAAM,CAAC,CAAA,EAAG,IAAI,CAAC,IAAI,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA,CAAG,EAAE,IAAI,CAAC;AACjD,aAAC,CAAC;AACF,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,QAAQ,EAAE;AACxC,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC;;aAChC;AACL,YAAA,IAAI,CAAC,aAAa,GAAG,EAAE;AACvB,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC;;;;AAMrC,IAAA,MAAM,UAAU,GAAA;AACd,QAAA,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE;AAC5B,QAAA,IAAI,CAAC,aAAa,GAAG,EAAE;AACvB,QAAA,IAAI,CAAC,eAAe,GAAG,EAAE;AACzB,QAAA,IAAI,CAAC,cAAc,GAAG,EAAE;QACxB,IAAI,CAAC,eAAe,EAAE;;IAGxB,iBAAiB,GAAA;QACf,IAAI,CAAC,UAAU,EAAE;;AAGX,IAAA,cAAc,CAAC,KAAgB,EAAA;QACrC,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;AACpE,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;;;IAIlB,eAAe,GAAA;QACrB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE;AACzC,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;;;AAInB,IAAA,UAAU,CAAC,KAAgB,EAAA;;QACjC,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;AACpE,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;YACvB,MAAM,KAAK,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,IAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,EAAE;AACnF,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;;;AAIpB,IAAA,UAAU,CAAC,KAAa,EAAA;QAC9B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC;AACrE,QAAA,IAAI,CAAC,eAAe,GAAG,EAAE;QACzB,IAAI,CAAC,eAAe,EAAE;AACtB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC;;AAGhD,IAAA,aAAa,CAAC,KAAK,EAAA;AACzB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3E,KAAK,CAAC,cAAc,EAAE;YACtB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;;;AAI/C,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,0BAA0B,EAAE,IAAI;AAChC,YAAA,oCAAoC,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB;YAC7E,iCAAiC,EAAE,IAAI,CAAC,KAAK;YAC7C,+BAA+B,EAAE,IAAI,CAAC,cAAc;YACpD,8BAA8B,EAAE,IAAI,CAAC,UAAU;SAChD;;AAGH,IAAA,IAAY,aAAa,GAAA;QACvB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,GAAG,IAAI,CAAC;AACpD,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,kBAAkB;QACtE,MAAM,QAAQ,GAAG,EAAE;AACnB,QAAA,IAAI,OAAO,GAAG,CAAiC,8BAAA,EAAA,WAAW,KAAK;QAE/D,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE;AAC/C,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,UAAU,GAAG,SAAS;YAC/D,OAAO,IAAI,MAAM,IAAI,CAAC,QAAQ,CAAI,CAAA,EAAA,YAAY,WAAW;;aACpD;YACL,OAAO,IAAI,GAAG;;AAGhB,QAAA,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;AACtB,QAAA,QAAQ,CAAC,IAAI,CAAC,uBAAuB,eAAe,CAAA,CAAA,CAAG,CAAC;AAExD,QAAA,OAAO,QAAQ;;IAGjB,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,yBAAyB,GAAG,0BAA0B;AAC9F,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,0BAA0B,GAAG,2BAA2B;QAE9F,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EACzJ,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACnC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC1C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAChC,CAAA,EACD,IAAI,CAAC,cAAc,IAClB,CACE,CAAA,KAAA,EAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,GAAG,EAAE,GAAG,CAAC,EAC1D,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EACrF,KAAK,EAAC,2BAA2B,EAAA,EAEhC,aAAa,UAAK,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,gCAAgC,EAAA,EAAA,oCAAA,CAA0C,CACrG,KAEN,CAAA,CAAA,YAAA,EAAA,EAAY,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,EAAA,EACrK,eAAe,CACL,CACd,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,wBAAwB,EAChC,EAAA,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,KAC5B,6DACG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MACrC,CAAI,CAAA,IAAA,EAAA,EAAA,GAAG,EAAE,KAAK,IAAG,OAAO,CAAM,CAC/B,CAAC,CACC,CACN,CACG,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAC5B,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,4BAA4B,EACnC,EAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAClC,CAAI,CAAA,IAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EAAA,EACZ,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,IAAI,CAAQ,EAChE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oCAAoC,EAAA,EAC7C,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAE,EAAA,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ,EAC5D,CAAA,CAAA,GAAA,EAAA,EACE,KAAK,EAAC,mCAAmC,EACzC,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,CAAC,IAAG;gBACX,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AACxB,aAAC,EAGC,EAAA,WAAA,CAAA,CACA,CACH,CACN,CAAC,CACC,KAEL,EAAE,CACH,EACA,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,KAC9B,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAE,2BAA2B,IAAI,CAAC,sBAAsB,GAAG,kCAAkC,GAAG,EAAE,CAAE,CAAA,EAC1G,EAAA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MACvC,CAAI,CAAA,IAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EAAA,EACZ,CAAA,CAAA,UAAA,EAAA,EAAU,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,GAAG,uBAAuB,GAAG,YAAY,EAAa,CAAA,EACpH,OAAO,CACL,CACN,CAAC,CACC,CACN,EACA,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,KAC7B,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,IAChC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,MACtC,CAAI,CAAA,IAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EAAA,EACZ,CAAA,CAAA,UAAA,EAAA,EAAU,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,YAAY,EAAY,CAAA,EAC1D,OAAO,CACL,CACN,CAAC,CACC,CACN,CACG,CACF;;;;;;;;;"}

package/dist/spw-stencil-library/spw-select.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-select.entry.esm.js","sources":["src/components/spw-select/spw-select.scss?tag=spw-select&encapsulation=shadow","src/components/spw-select/spw-select.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-select {\n position: relative;\n &__container {\n position: relative;\n }\n &__arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: 12px;\n pointer-events: none;\n color: var(--spw-color-themes-grey-grey-600);\n font-size: 16px;\n }\n &__trigger {\n width: 100%;\n height: 40px;\n border-radius: 4px;\n border: 1px solid var(--spw-color-themes-grey-grey-800);\n background-color: #fff;\n font-size: 16px;\n color: var(--spw-color-themes-grey-grey-800);\n position: relative;\n padding: 0;\n margin: 0;\n appearance: none;\n padding: 0 12px;\n padding-right: 40px;\n\n &:hover {\n outline: 4px solid var(--spw-color-themes-grey-grey-300);\n }\n\n &:focus-visible {\n outline: 3px solid white;\n outline-offset: 0;\n box-shadow: 0 0 0 6px black;\n }\n\n &::after {\n content: '\\f078';\n font-family: var(--spw-ds-font-icons-solid);\n font-weight: 900;\n font-size: 14px;\n color: var(--spw-color-themes-grey-grey-800);\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n }\n\n .spw-select--is-error & {\n border-color: var(--spw-colors-states-error-error-300);\n }\n\n .spw-select--large & {\n height: 60px;\n padding: 0 24px;\n font-size: 18px;\n }\n\n .spw-select--disabled & {\n border-color: var(--spw-color-themes-grey-grey-400);\n background: var(--spw-color-themes-grey-grey-100);\n color: var(--spw-color-themes-grey-grey-500);\n cursor: not-allowed;\n &::placeholder {\n color: var(--spw-color-themes-grey-grey-500);\n }\n &:hover,\n &:focus,\n &:focus-visible {\n outline: none;\n }\n }\n }\n}\n","import { AttachInternals, Host, Component, Prop, State, Event, EventEmitter, h, Element, Watch } from '@stencil/core';\n\nexport interface SelectItem {\n label: string;\n value: string \| number;\n}\n\n@Component({\n tag: 'spw-select',\n styleUrl: 'spw-select.scss',\n formAssociated: true,\n shadow: true,\n})\nexport class SpwSelect {\n @Element() el: HTMLSpwSelectElement;\n\n /** Emet un event si la valeur change /\n @Event() valueChanged: EventEmitter<string \| number>;\n @State() internalValue: string \| number;\n\n /* Valeur sélectionnée actuelle, mutable et reflétée dans le DOM /\n @Prop({ mutable: true, reflect: true }) value: string \| number;\n /* Label associé au champ de sélection /\n @Prop() label: string = '';\n /* Texte du placeholder à afficher lorsque rien n'est sélectionné /\n @Prop() placeholder: string = 'Sélectionner une option';\n /* Indique si le champ de sélection est désactivé /\n @Prop() disabled: boolean;\n /* Nom de l'élément utilisé dans les formulaires pour associer la valeur sélectionnée /\n @Prop() name: string;\n /* Indique si la sélection est obligatoire dans le formulaire /\n @Prop() required: boolean = false;\n /* Taille du champ de sélection : 'large' ou 'medium' /\n @Prop() size: 'large' \| 'medium' = 'medium';\n /* Texte d'assistance affiché sous le champ de sélection /\n @Prop() assistiveText?: string;\n /* Message d'erreur à afficher sous le champ de sélection /\n @Prop() error?: string = '';\n /* Message d'indication (hint) à afficher sous le champ de sélection /\n @Prop() hint?: string = '';\n /* Message de succès à afficher sous le champ de sélection /\n @Prop() success?: string = '';\n /* Message de warning à afficher sous le champ /\n @Prop() warning?: string = '';\n /* Affiche une icône d'erreur si vrai /\n @Prop() showErrorIcon?: boolean = true;\n /* Affiche une icône d'indication si vrai /\n @Prop() showHintIcon?: boolean = true;\n /* Affiche une icône de succès si vrai /\n @Prop() showSuccessIcon?: boolean = true;\n /* Affiche une icône de warning si vrai /\n @Prop() showWarningIcon?: boolean = true;\n /* Liste d'items dynamiques pour générer les options (array d'objects avec label + value) /\n @Prop() items?: SelectItem[];\n /* Propriété à utiliser comme label des options /\n @Prop() itemLabel?: string;\n /* Propriété à utiliser comme valeur des options */\n @Prop() itemValue?: string;\n\n private selectElement!: HTMLSelectElement;\n private defaultValue: string \| number \| null = null;\n\n @AttachInternals() internals: ElementInternals;\n\n @Watch('items')\n handleItemsChange() {\n if (this.selectElement) {\n this.syncDynamicOptions();\n }\n }\n\n componentWillLoad() {\n this.defaultValue = this.value ?? this.getInitialSelectedValue();\n this.internalValue = this.value \|\| this.getInitialSelectedValue();\n }\n\n componentDidLoad() {\n this.internals.setFormValue(this.getFormValue());\n if (!this.items) {\n this.moveOptionsToLightDom();\n } else {\n this.syncDynamicOptions();\n }\n }\n\n formResetCallback() {\n this.setValue(this.defaultValue ?? '');\n }\n\n private setValue(val: string \| number) {\n this.internalValue = val;\n this.value = val;\n\n if (this.selectElement) {\n this.selectElement.value = String(val);\n }\n\n this.internals.setFormValue(this.getFormValue());\n this.valueChanged.emit(this.internalValue);\n }\n\n private getFormValue(): string \| null {\n return this.internalValue ? String(this.internalValue) : null;\n }\n\n private getInitialSelectedValue(): string \| number \| null {\n if (this.items && this.items.length > 0) {\n return null;\n }\n const assignedNodes = Array.from(this.el.querySelectorAll('option')) as HTMLOptionElement[];\n for (const option of assignedNodes) {\n if (option.hasAttribute('selected')) {\n return option.getAttribute('value');\n }\n }\n return null;\n }\n\n private handleSelectChange(event: Event) {\n const select = event.target as HTMLSelectElement;\n this.internalValue = select.value;\n this.value = this.internalValue;\n this.internals.setFormValue(this.getFormValue());\n this.valueChanged.emit(this.internalValue);\n }\n\n private moveOptionsToLightDom() {\n const slot = this.el.shadowRoot.querySelector('slot');\n if (slot) {\n const assignedNodes = slot.assignedNodes({ flatten: true }) as HTMLElement[];\n assignedNodes.forEach(node => {\n if (node.nodeName === 'OPTION' \|\| node.nodeName === 'OPTGROUP') {\n this.selectElement.appendChild(node);\n }\n });\n }\n }\n\n private syncDynamicOptions() {\n while (this.selectElement.options.length > 1) {\n this.selectElement.remove(1);\n }\n\n if (this.items && this.items.length > 0) {\n this.items.forEach(item => {\n const option = document.createElement('option');\n const value = this.itemValue ? item[this.itemValue] : item;\n const label = this.itemLabel ? item[this.itemLabel] : item;\n option.value = String(value);\n option.textContent = String(label);\n this.selectElement.appendChild(option);\n });\n }\n\n if (this.selectElement.value !== String(this.internalValue \|\| '')) {\n this.selectElement.value = String(this.internalValue \|\| '');\n }\n }\n\n private renderErrorMessage() {\n if (this.error) {\n return (\n <spw-field-message variant=\"error\" showIcon={this.showErrorIcon}>\n {this.error}\n </spw-field-message>\n );\n }\n }\n\n private renderHintMessage() {\n if (this.hint) {\n return (\n <spw-field-message variant=\"hint\" showIcon={this.showHintIcon}>\n {this.hint}\n </spw-field-message>\n );\n }\n }\n\n private renderSuccessMessage() {\n if (this.success) {\n return (\n <spw-field-message variant=\"success\" showIcon={this.showSuccessIcon}>\n {this.success}\n </spw-field-message>\n );\n }\n }\n\n private renderWarningMessage() {\n if (this.warning) {\n return (\n <spw-field-message variant=\"warning\" showIcon={this.showWarningIcon}>\n {this.warning}\n </spw-field-message>\n );\n }\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-select': true,\n [`spw-select--${this.size}`]: true,\n 'spw-select--disabled': this.disabled,\n 'spw-select--is-error': !!this.error,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.elementClass}>\n {this.label && <spw-field-label label={this.label} name={this.name} required={this.required}></spw-field-label>}\n {this.assistiveText && (\n <spw-field-message class=\"spw-tw-mb-2 -spw-tw-mt-1\" variant=\"hint\" showIcon={false}>\n {this.assistiveText}\n </spw-field-message>\n )}\n <div class=\"spw-select__container\">\n <select\n id={this.name}\n class=\"spw-select__trigger\"\n onChange={event => this.handleSelectChange(event)}\n disabled={this.disabled}\n ref={el => (this.selectElement = el as HTMLSelectElement)}\n tabindex={this.disabled ? -1 : 0}\n >\n <option value=\"\" disabled selected={!this.internalValue}>\n {this.placeholder}\n </option>\n </select>\n <spw-icon class=\"spw-select__arrow\" icon=\"fa-chevron-down\"></spw-icon>\n </div>\n {!this.items && <slot />}\n </div>\n {this.renderErrorMessage()}\n {this.renderHintMessage()}\n {this.renderSuccessMessage()}\n {this.renderWarningMessage()}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"spw-select.entry.esm.js","sources":["src/components/spw-select/spw-select.scss?tag=spw-select&encapsulation=shadow","src/components/spw-select/spw-select.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-select {\n position: relative;\n &__container {\n position: relative;\n }\n &__arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: 12px;\n pointer-events: none;\n color: var(--spw-color-themes-grey-grey-600);\n font-size: 16px;\n }\n &__trigger {\n width: 100%;\n height: 40px;\n border-radius: 4px;\n border: 1px solid var(--spw-color-themes-grey-grey-800);\n background-color: #fff;\n font-size: 16px;\n color: var(--spw-color-themes-grey-grey-800);\n position: relative;\n padding: 0;\n margin: 0;\n appearance: none;\n padding: 0 12px;\n padding-right: 40px;\n\n &:hover {\n outline: 4px solid var(--spw-color-themes-grey-grey-300);\n }\n\n &:focus-visible {\n outline: 3px solid white;\n outline-offset: 0;\n box-shadow: 0 0 0 6px black;\n }\n\n &::after {\n content: '\\f078';\n font-family: var(--spw-ds-font-icons-solid);\n font-weight: 900;\n font-size: 14px;\n color: var(--spw-color-themes-grey-grey-800);\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n }\n\n .spw-select--is-error & {\n border-color: var(--spw-colors-states-error-error-300);\n }\n\n .spw-select--large & {\n height: 60px;\n padding: 0 24px;\n font-size: 18px;\n }\n\n .spw-select--disabled & {\n border-color: var(--spw-color-themes-grey-grey-400);\n background: var(--spw-color-themes-grey-grey-100);\n color: var(--spw-color-themes-grey-grey-500);\n cursor: not-allowed;\n &::placeholder {\n color: var(--spw-color-themes-grey-grey-500);\n }\n &:hover,\n &:focus,\n &:focus-visible {\n outline: none;\n }\n }\n }\n}\n","import { AttachInternals, Host, Component, Method, Prop, State, Event, EventEmitter, h, Element, Watch } from '@stencil/core';\n\nexport interface SelectItem {\n label: string;\n value: string \| number;\n}\n\n@Component({\n tag: 'spw-select',\n styleUrl: 'spw-select.scss',\n formAssociated: true,\n shadow: true,\n})\nexport class SpwSelect {\n @Element() el: HTMLSpwSelectElement;\n\n /** Emet un event si la valeur change /\n @Event() valueChanged: EventEmitter<string \| number>;\n @State() internalValue: string \| number;\n\n /* Valeur sélectionnée actuelle, mutable et reflétée dans le DOM /\n @Prop({ mutable: true, reflect: true }) value: string \| number;\n /* Label associé au champ de sélection /\n @Prop() label: string = '';\n /* Texte du placeholder à afficher lorsque rien n'est sélectionné /\n @Prop() placeholder: string = 'Sélectionner une option';\n /* Indique si le champ de sélection est désactivé /\n @Prop() disabled: boolean;\n /* Nom de l'élément utilisé dans les formulaires pour associer la valeur sélectionnée /\n @Prop() name: string;\n /* Indique si la sélection est obligatoire dans le formulaire /\n @Prop() required: boolean = false;\n /* Taille du champ de sélection : 'large' ou 'medium' /\n @Prop() size: 'large' \| 'medium' = 'medium';\n /* Texte d'assistance affiché sous le champ de sélection /\n @Prop() assistiveText?: string;\n /* Message d'erreur à afficher sous le champ de sélection /\n @Prop() error?: string = '';\n /* Message d'indication (hint) à afficher sous le champ de sélection /\n @Prop() hint?: string = '';\n /* Message de succès à afficher sous le champ de sélection /\n @Prop() success?: string = '';\n /* Message de warning à afficher sous le champ /\n @Prop() warning?: string = '';\n /* Affiche une icône d'erreur si vrai /\n @Prop() showErrorIcon?: boolean = true;\n /* Affiche une icône d'indication si vrai /\n @Prop() showHintIcon?: boolean = true;\n /* Affiche une icône de succès si vrai /\n @Prop() showSuccessIcon?: boolean = true;\n /* Affiche une icône de warning si vrai /\n @Prop() showWarningIcon?: boolean = true;\n /* Liste d'items dynamiques pour générer les options (array d'objects avec label + value) /\n @Prop() items?: SelectItem[];\n /* Propriété à utiliser comme label des options /\n @Prop() itemLabel?: string;\n /* Propriété à utiliser comme valeur des options */\n @Prop() itemValue?: string;\n\n private selectElement!: HTMLSelectElement;\n private defaultValue: string \| number \| null = null;\n\n @AttachInternals() internals: ElementInternals;\n\n @Watch('items')\n handleItemsChange() {\n if (this.selectElement) {\n this.syncDynamicOptions();\n }\n }\n\n @Method()\n async resetSelect() {\n this.internalValue = '';\n this.value = '';\n if (this.selectElement) {\n this.selectElement.value = '';\n }\n this.internals.setFormValue('');\n this.valueChanged.emit('');\n }\n\n componentWillLoad() {\n this.defaultValue = this.value ?? this.getInitialSelectedValue();\n this.internalValue = this.value \|\| this.getInitialSelectedValue();\n }\n\n componentDidLoad() {\n this.internals.setFormValue(this.getFormValue());\n if (!this.items) {\n this.moveOptionsToLightDom();\n } else {\n this.syncDynamicOptions();\n }\n }\n\n formResetCallback() {\n this.setValue(this.defaultValue ?? '');\n this.resetSelect();\n }\n\n private setValue(val: string \| number) {\n this.internalValue = val;\n this.value = val;\n\n if (this.selectElement) {\n this.selectElement.value = String(val);\n }\n\n this.internals.setFormValue(this.getFormValue());\n this.valueChanged.emit(this.internalValue);\n }\n\n private getFormValue(): string \| null {\n return this.internalValue ? String(this.internalValue) : null;\n }\n\n private getInitialSelectedValue(): string \| number \| null {\n if (this.items && this.items.length > 0) {\n return null;\n }\n const assignedNodes = Array.from(this.el.querySelectorAll('option')) as HTMLOptionElement[];\n for (const option of assignedNodes) {\n if (option.hasAttribute('selected')) {\n return option.getAttribute('value');\n }\n }\n return null;\n }\n\n private handleSelectChange(event: Event) {\n const select = event.target as HTMLSelectElement;\n this.internalValue = select.value;\n this.value = this.internalValue;\n this.internals.setFormValue(this.getFormValue());\n this.valueChanged.emit(this.internalValue);\n }\n\n private moveOptionsToLightDom() {\n const slot = this.el.shadowRoot.querySelector('slot');\n if (slot) {\n const assignedNodes = slot.assignedNodes({ flatten: true }) as HTMLElement[];\n assignedNodes.forEach(node => {\n if (node.nodeName === 'OPTION' \|\| node.nodeName === 'OPTGROUP') {\n this.selectElement.appendChild(node);\n }\n });\n }\n }\n\n private syncDynamicOptions() {\n while (this.selectElement.options.length > 1) {\n this.selectElement.remove(1);\n }\n\n if (this.items && this.items.length > 0) {\n this.items.forEach(item => {\n const option = document.createElement('option');\n const value = this.itemValue ? item[this.itemValue] : item;\n const label = this.itemLabel ? item[this.itemLabel] : item;\n option.value = String(value);\n option.textContent = String(label);\n this.selectElement.appendChild(option);\n });\n }\n\n if (this.selectElement.value !== String(this.internalValue \|\| '')) {\n this.selectElement.value = String(this.internalValue \|\| '');\n }\n }\n\n private renderErrorMessage() {\n if (this.error) {\n return (\n <spw-field-message variant=\"error\" showIcon={this.showErrorIcon}>\n {this.error}\n </spw-field-message>\n );\n }\n }\n\n private renderHintMessage() {\n if (this.hint) {\n return (\n <spw-field-message variant=\"hint\" showIcon={this.showHintIcon}>\n {this.hint}\n </spw-field-message>\n );\n }\n }\n\n private renderSuccessMessage() {\n if (this.success) {\n return (\n <spw-field-message variant=\"success\" showIcon={this.showSuccessIcon}>\n {this.success}\n </spw-field-message>\n );\n }\n }\n\n private renderWarningMessage() {\n if (this.warning) {\n return (\n <spw-field-message variant=\"warning\" showIcon={this.showWarningIcon}>\n {this.warning}\n </spw-field-message>\n );\n }\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-select': true,\n [`spw-select--${this.size}`]: true,\n 'spw-select--disabled': this.disabled,\n 'spw-select--is-error': !!this.error,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.elementClass}>\n {this.label && <spw-field-label label={this.label} name={this.name} required={this.required}></spw-field-label>}\n {this.assistiveText && (\n <spw-field-message class=\"spw-tw-mb-2 -spw-tw-mt-1\" variant=\"hint\" showIcon={false}>\n {this.assistiveText}\n </spw-field-message>\n )}\n <div class=\"spw-select__container\">\n <select\n id={this.name}\n class=\"spw-select__trigger\"\n onChange={event => this.handleSelectChange(event)}\n disabled={this.disabled}\n ref={el => (this.selectElement = el as HTMLSelectElement)}\n tabindex={this.disabled ? -1 : 0}\n >\n <option value=\"\" disabled selected={!this.internalValue}>\n {this.placeholder}\n </option>\n </select>\n <spw-icon class=\"spw-select__arrow\" icon=\"fa-chevron-down\"></spw-icon>\n </div>\n {!this.items && <slot />}\n </div>\n {this.renderErrorMessage()}\n {this.renderHintMessage()}\n {this.renderSuccessMessage()}\n {this.renderWarningMessage()}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,+zIAA+zI;;MCav0I,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;;;;;AAgBU,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;;AAElB,QAAA,IAAW,CAAA,WAAA,GAAW,yBAAyB;;AAM/C,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAEzB,QAAA,IAAI,CAAA,IAAA,GAAuB,QAAQ;;AAInC,QAAA,IAAK,CAAA,KAAA,GAAY,EAAE;;AAEnB,QAAA,IAAI,CAAA,IAAA,GAAY,EAAE;;AAElB,QAAA,IAAO,CAAA,OAAA,GAAY,EAAE;;AAErB,QAAA,IAAO,CAAA,OAAA,GAAY,EAAE;;AAErB,QAAA,IAAa,CAAA,aAAA,GAAa,IAAI;;AAE9B,QAAA,IAAY,CAAA,YAAA,GAAa,IAAI;;AAE7B,QAAA,IAAe,CAAA,eAAA,GAAa,IAAI;;AAEhC,QAAA,IAAe,CAAA,eAAA,GAAa,IAAI;AAShC,QAAA,IAAY,CAAA,YAAA,GAA2B,IAAI;AAkMpD;IA7LC,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,kBAAkB,EAAE;;;AAK7B,IAAA,MAAM,WAAW,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,EAAE;AACvB,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE;AACf,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACtB,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,EAAE;;AAE/B,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC;AAC/B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;;IAG5B,iBAAiB,GAAA;;AACf,QAAA,IAAI,CAAC,YAAY,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,IAAI,CAAC,uBAAuB,EAAE;QAChE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,uBAAuB,EAAE;;IAGnE,gBAAgB,GAAA;QACd,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;AAChD,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,IAAI,CAAC,qBAAqB,EAAE;;aACvB;YACL,IAAI,CAAC,kBAAkB,EAAE;;;IAI7B,iBAAiB,GAAA;;QACf,IAAI,CAAC,QAAQ,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,EAAE,CAAC;QACtC,IAAI,CAAC,WAAW,EAAE;;AAGZ,IAAA,QAAQ,CAAC,GAAoB,EAAA;AACnC,QAAA,IAAI,CAAC,aAAa,GAAG,GAAG;AACxB,QAAA,IAAI,CAAC,KAAK,GAAG,GAAG;AAEhB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC;;QAGxC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;QAChD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;IAGpC,YAAY,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI;;IAGvD,uBAAuB,GAAA;AAC7B,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AACvC,YAAA,OAAO,IAAI;;AAEb,QAAA,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAwB;AAC3F,QAAA,KAAK,MAAM,MAAM,IAAI,aAAa,EAAE;AAClC,YAAA,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;AACnC,gBAAA,OAAO,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC;;;AAGvC,QAAA,OAAO,IAAI;;AAGL,IAAA,kBAAkB,CAAC,KAAY,EAAA;AACrC,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B;AAChD,QAAA,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,KAAK;AACjC,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;QAChD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;;IAGpC,qBAAqB,GAAA;AAC3B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC;QACrD,IAAI,IAAI,EAAE;AACR,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAkB;AAC5E,YAAA,aAAa,CAAC,OAAO,CAAC,IAAI,IAAG;AAC3B,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;AAC9D,oBAAA,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC;;AAExC,aAAC,CAAC;;;IAIE,kBAAkB,GAAA;QACxB,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;AAC5C,YAAA,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;;AAG9B,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AACvC,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;gBACxB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC/C,gBAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI;AAC1D,gBAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI;AAC1D,gBAAA,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;AAC5B,gBAAA,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC;AAClC,gBAAA,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,MAAM,CAAC;AACxC,aAAC,CAAC;;AAGJ,QAAA,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,KAAK,MAAM,CAAC,IAAI,CAAC,aAAa,IAAI,EAAE,CAAC,EAAE;AACjE,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,aAAa,IAAI,EAAE,CAAC;;;IAIvD,kBAAkB,GAAA;AACxB,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QACE,CAAmB,CAAA,mBAAA,EAAA,EAAA,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5D,EAAA,IAAI,CAAC,KAAK,CACO;;;IAKlB,iBAAiB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,QACE,CAAmB,CAAA,mBAAA,EAAA,EAAA,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC1D,EAAA,IAAI,CAAC,IAAI,CACQ;;;IAKlB,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,QACE,CAAmB,CAAA,mBAAA,EAAA,EAAA,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,EAChE,EAAA,IAAI,CAAC,OAAO,CACK;;;IAKlB,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,QACE,CAAmB,CAAA,mBAAA,EAAA,EAAA,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,EAChE,EAAA,IAAI,CAAC,OAAO,CACK;;;AAK1B,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,YAAY,EAAE,IAAI;AAClB,YAAA,CAAC,eAAe,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAClC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;AACrC,YAAA,sBAAsB,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SACrC;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC1B,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAiB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAoB,CAAA,EAC9G,IAAI,CAAC,aAAa,KACjB,0EAAmB,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAE,KAAK,IAC/E,IAAI,CAAC,aAAa,CACD,CACrB,EACD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,KAAK,EAAC,qBAAqB,EAC3B,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EACjD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAuB,CAAC,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,EAEhC,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,QAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,aAAa,EAAA,EACpD,IAAI,CAAC,WAAW,CACV,CACF,EACT,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,iBAAiB,GAAY,CAClE,EACL,CAAC,IAAI,CAAC,KAAK,IAAI,8DAAQ,CACpB,EACL,IAAI,CAAC,kBAAkB,EAAE,EACzB,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,oBAAoB,EAAE,EAC3B,IAAI,CAAC,oBAAoB,EAAE,CACvB;;;;;;;;;;;;"}

package/dist/spw-stencil-library/spw-sidebar-navigation-item.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-sidebar-navigation-item.entry.esm.js","sources":["src/components/spw-sidebar/spw-sidebar-navigation-item/spw-sidebar-navigation-item.scss?tag=spw-sidebar-navigation-item","src/components/spw-sidebar/spw-sidebar-navigation-item/spw-sidebar-navigation-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-sidebar-navigation-item {\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: start;\n color: inherit;\n text-decoration: none;\n padding-right: 16px;\n font-size: 16px;\n width: var(--spw-ds-bo-sidebar-expanded-width);\n color: var(--spw-colors-support-grey-grey-900);\n transition: all 0.2s ease;\n margin: 8px 0;\n .spw-sidebar-navigation-dropdown & {\n width: auto;\n margin: 0;\n }\n &:hover {\n color: var(--spw-colors-support-grey-grey-900);\n }\n &--active,\n &--active:hover {\n .spw-sidebar-navigation-item__icon {\n color: var(--spw-ds-primary);\n }\n }\n &--disabled {\n cursor: not-allowed;\n opacity: 0.3;\n }\n spw-sidebar-navigation-dropdown & {\n padding-right: 0;\n }\n spw-tooltip {\n line-height: 1;\n }\n &__bubble {\n position: absolute;\n top: 0;\n left: 32px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n z-index: 12;\n width: 20px;\n height: 20px;\n font-size: 10px;\n line-height: 1;\n border: 3px solid white;\n border-radius: 50%;\n background-color: var(--spw-ds-primary);\n color: white;\n }\n &__icon {\n position: relative;\n min-width: var(--spw-ds-bo-sidebar-width);\n width: var(--spw-ds-bo-sidebar-width);\n padding: 12px 0;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n font-size: 18px;\n .--expanded & {\n position: static;\n }\n &:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: all 0.2s ease;\n .spw-sidebar-navigation-item:not(.spw-sidebar-navigation-item--disabled):hover & {\n width: 40px;\n height: 40px;\n background-color: var(--spw-colors-support-grey-grey-200);\n .--expanded & {\n width: calc(100% - 16px);\n height: 100%;\n }\n }\n .spw-sidebar-navigation-item--dropdown-opened &,\n .spw-sidebar-navigation-item--dropdown-opened:hover & {\n width: 0;\n height: 0;\n background-color: var(--spw-colors-support-grey-grey-100) !important;\n .--expanded & {\n width: calc(100% - 16px);\n height: 100%;\n }\n }\n .--expanded & {\n transition: background-color 0.2s ease;\n border-radius: 4px;\n }\n }\n spw-icon {\n position: relative;\n z-index: 2;\n }\n }\n &__content {\n padding: 12px 0;\n flex: 1;\n z-index: 2;\n max-width: calc(var(--spw-ds-bo-sidebar-expanded-width) - var(--spw-ds-bo-sidebar-width) - 12px);\n .spw-sidebar-navigation-dropdown & {\n max-width: 100%;\n padding: 8px;\n }\n &-label {\n white-space: nowrap;\n overflow: hidden;\n display: block;\n text-overflow: ellipsis;\n .--expanded & {\n white-space: normal;\n overflow: visible;\n text-overflow: none;\n }\n .spw-sidebar-navigation-dropdown & {\n font-size: 14px;\n }\n }\n }\n &__dropdown-toggle {\n position: absolute;\n right: 16px;\n top: 10px;\n width: 24px;\n height: 24px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n z-index: 10;\n transition: background-color 0.2s ease;\n\n .spw-sidebar-navigation-dropdown & {\n right: 8px;\n top: 5px;\n }\n\n &:hover {\n background-color: var(--spw-colors-support-grey-grey-300);\n .spw-sidebar-navigation-dropdown & {\n background-color: var(--spw-colors-support-grey-grey-400);\n }\n }\n\n spw-icon {\n font-size: 14px;\n position: relative;\n color: var(--spw-colors-support-grey-grey-900);\n transition: transform 0.2s ease;\n }\n\n &--open {\n spw-icon {\n transform: rotate(180deg);\n }\n }\n }\n spw-sidebar-navigation-dropdown {\n .--collapsed & {\n display: none;\n }\n }\n}\n\n.spw-sidebar-navigation-item--dropdown-opened > .spw-sidebar-navigation-item__content > .spw-sidebar-navigation-item__content-label {\n font-weight: bold;\n}\n\n.spw-sidebar-navigation-item--has-dropdown > .spw-sidebar-navigation-item__content > .spw-sidebar-navigation-item__content-label {\n padding-right: 32px;\n}\n\n.spw-sidebar-navigation-item .spw-sidebar-navigation-item--dropdown-opened > .spw-sidebar-navigation-item__content {\n background: white;\n border-radius: 4px;\n}\n\n.spw-sidebar-navigation-dropdown .spw-sidebar-navigation-item {\n border-radius: 4px;\n &:hover {\n background-color: var(--spw-colors-support-grey-grey-300);\n }\n}\n","import { Component, h, Prop, Element, State } from '@stencil/core';\n\n@Component({\n tag: 'spw-sidebar-navigation-item',\n styleUrl: 'spw-sidebar-navigation-item.scss',\n shadow: false,\n})\nexport class SpwSidebarNavigationItem {\n @Element() el: HTMLElement;\n\n /** A appliquer sur spw-sidebar-navigation-item, permet de définir un href sur l'élément /\n @Prop() href?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de définir une référence font-awesome sur l'élément /\n @Prop() icon?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de mettre en évidence un état actif /\n @Prop() active: boolean = false;\n /* A appliquer sur spw-sidebar-navigation-item, permet de définir si l'élément est disabled ou non /\n @Prop() disabled: boolean = false;\n /* A appliquer sur spw-sidebar-navigation-item, permet d'afficher une bulle de notification avec un nombre /\n @Prop() bubble?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de définir un tooltip au hover /\n @Prop() tooltipTitle?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de choisir la variante d'icônes font-awesome */\n @Prop() iconVariant: 'fa-solid' \| 'fa-brands' \| 'fa-regular' = 'fa-regular';\n\n @State() hasDropdown: boolean = false;\n @State() dropdownOpen: boolean = false;\n @State() navExpanded: boolean = false;\n\n private mutationObserver?: MutationObserver;\n private bodyClassObserver?: MutationObserver;\n\n componentDidLoad() {\n this.checkForDropdown();\n this.setupMutationObserver();\n this.checkNavExpanded();\n this.setupBodyClassObserver();\n }\n\n componentDidUpdate() {\n this.checkForDropdown();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n if (this.bodyClassObserver) {\n this.bodyClassObserver.disconnect();\n }\n }\n\n private setupMutationObserver() {\n this.mutationObserver = new MutationObserver(() => {\n this.checkForDropdown();\n });\n\n this.mutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['open'],\n });\n }\n\n private checkForDropdown() {\n const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown') as any;\n this.hasDropdown = dropdown !== null;\n\n if (dropdown) {\n this.dropdownOpen = !!dropdown.open \|\| dropdown.hasAttribute?.('open');\n } else {\n this.dropdownOpen = false;\n }\n }\n\n private checkNavExpanded = () => {\n this.navExpanded = document.body.classList.contains('spw-sidebar-expanded');\n };\n\n private setupBodyClassObserver() {\n this.bodyClassObserver = new MutationObserver(() => {\n this.checkNavExpanded();\n });\n this.bodyClassObserver.observe(document.body, {\n attributes: true,\n attributeFilter: ['class'],\n });\n }\n\n private get classes() {\n return {\n 'spw-sidebar-navigation-item': true,\n 'spw-sidebar-navigation-item--active': this.active,\n 'spw-sidebar-navigation-item--disabled': this.disabled,\n 'spw-sidebar-navigation-item--has-dropdown': this.hasDropdown,\n 'spw-sidebar-navigation-item--dropdown-opened': this.dropdownOpen,\n } as Record<string, boolean>;\n }\n\n private handleDropdownToggle = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.disabled) return;\n\n const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown') as any;\n\n if (dropdown) {\n dropdown.open = !dropdown.open;\n if (dropdown.open) {\n dropdown.setAttribute?.('open', '');\n } else {\n dropdown.removeAttribute?.('open');\n }\n this.dropdownOpen = dropdown.open;\n }\n };\n\n render() {\n const Tag = this.href && !this.disabled ? 'a' : 'div';\n\n const iconContent = <spw-icon variant={this.iconVariant} icon={this.icon}></spw-icon>;\n\n const iconDiv = (\n <div class=\"spw-sidebar-navigation-item__icon\">\n {this.bubble && <span class=\"spw-sidebar-navigation-item__bubble\">{this.bubble}</span>}\n {iconContent}\n </div>\n );\n\n const iconWithBubble = this.tooltipTitle ? (\n <spw-tooltip cursor={this.disabled ? 'disabled' : 'pointer'} tooltip-title={this.tooltipTitle} direction=\"right\" visible={!this.navExpanded}>\n {iconDiv}\n </spw-tooltip>\n ) : (\n iconDiv\n );\n\n const toggleClasses = {\n 'spw-sidebar-navigation-item__dropdown-toggle': true,\n 'spw-sidebar-navigation-item__dropdown-toggle--open': this.dropdownOpen,\n } as Record<string, boolean>;\n\n return (\n <Tag class={this.classes} href={this.href} aria-disabled={this.disabled ? 'true' : undefined} tabIndex={this.disabled ? -1 : 0}>\n {this.icon && iconWithBubble}\n\n <div class=\"spw-sidebar-navigation-item__content\">\n <div class=\"spw-sidebar-navigation-item__content-label\">\n <slot></slot>\n </div>\n\n {this.hasDropdown && (\n <div class={toggleClasses} onClick={this.handleDropdownToggle} tabIndex={this.disabled ? -1 : 0}>\n <spw-icon icon=\"fa-chevron-down\"></spw-icon>\n </div>\n )}\n\n <slot name=\"dropdown\"></slot>\n </div>\n </Tag>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"spw-sidebar-navigation-item.entry.esm.js","sources":["src/components/spw-sidebar/spw-sidebar-navigation-item/spw-sidebar-navigation-item.scss?tag=spw-sidebar-navigation-item","src/components/spw-sidebar/spw-sidebar-navigation-item/spw-sidebar-navigation-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-sidebar-navigation-item {\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: start;\n color: inherit;\n text-decoration: none;\n padding-right: 16px;\n font-size: 16px;\n width: var(--spw-ds-bo-sidebar-expanded-width);\n color: var(--spw-colors-support-grey-grey-900);\n transition: all 0.2s ease;\n margin: 8px 0;\n .spw-sidebar-navigation-dropdown & {\n width: auto;\n margin: 0;\n }\n &:hover {\n color: var(--spw-colors-support-grey-grey-900);\n }\n &--active,\n &--active:hover {\n .spw-sidebar-navigation-item__icon {\n color: var(--spw-ds-primary);\n }\n }\n &--disabled {\n cursor: not-allowed;\n opacity: 0.3;\n }\n spw-sidebar-navigation-dropdown & {\n padding-right: 0;\n }\n spw-tooltip {\n line-height: 1;\n }\n &__bubble {\n position: absolute;\n top: 0;\n left: 32px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n z-index: 12;\n width: 20px;\n height: 20px;\n font-size: 10px;\n line-height: 1;\n border: 3px solid white;\n border-radius: 50%;\n background-color: var(--spw-ds-primary);\n color: white;\n }\n &__icon {\n position: relative;\n min-width: var(--spw-ds-bo-sidebar-width);\n width: var(--spw-ds-bo-sidebar-width);\n padding: 12px 0;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n font-size: 18px;\n .--expanded & {\n position: static;\n }\n &:before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: all 0.2s ease;\n .spw-sidebar-navigation-item:not(.spw-sidebar-navigation-item--disabled):hover & {\n width: 40px;\n height: 40px;\n background-color: var(--spw-colors-support-grey-grey-200);\n .--expanded & {\n width: calc(100% - 16px);\n height: 100%;\n }\n }\n .spw-sidebar-navigation-item--dropdown-opened &,\n .spw-sidebar-navigation-item--dropdown-opened:hover & {\n width: 0;\n height: 0;\n background-color: var(--spw-colors-support-grey-grey-100) !important;\n .--expanded & {\n width: calc(100% - 16px);\n height: 100%;\n }\n }\n .--expanded & {\n transition: background-color 0.2s ease;\n border-radius: 4px;\n }\n }\n spw-icon {\n position: relative;\n z-index: 2;\n }\n }\n &__content {\n padding: 12px 0;\n flex: 1;\n z-index: 2;\n max-width: calc(var(--spw-ds-bo-sidebar-expanded-width) - var(--spw-ds-bo-sidebar-width) - 12px);\n .spw-sidebar-navigation-dropdown & {\n max-width: 100%;\n padding: 8px;\n }\n &-label {\n white-space: nowrap;\n overflow: hidden;\n display: block;\n text-overflow: ellipsis;\n .--expanded & {\n white-space: normal;\n overflow: visible;\n text-overflow: none;\n }\n .spw-sidebar-navigation-dropdown & {\n font-size: 14px;\n }\n }\n }\n &__dropdown-toggle {\n position: absolute;\n right: 16px;\n top: 10px;\n width: 24px;\n height: 24px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n z-index: 10;\n transition: background-color 0.2s ease;\n\n .spw-sidebar-navigation-dropdown & {\n right: 8px;\n top: 5px;\n }\n\n &:hover {\n background-color: var(--spw-colors-support-grey-grey-300);\n .spw-sidebar-navigation-dropdown & {\n background-color: var(--spw-colors-support-grey-grey-400);\n }\n }\n\n spw-icon {\n font-size: 14px;\n position: relative;\n color: var(--spw-colors-support-grey-grey-900);\n transition: transform 0.2s ease;\n }\n\n &--open {\n spw-icon {\n transform: rotate(180deg);\n }\n }\n }\n spw-sidebar-navigation-dropdown {\n .--collapsed & {\n display: none;\n }\n }\n}\n\n.spw-sidebar-navigation-item--dropdown-opened > .spw-sidebar-navigation-item__content > .spw-sidebar-navigation-item__content-label {\n font-weight: bold;\n}\n\n.spw-sidebar-navigation-item--has-dropdown > .spw-sidebar-navigation-item__content > .spw-sidebar-navigation-item__content-label {\n padding-right: 32px;\n}\n\n.spw-sidebar-navigation-item .spw-sidebar-navigation-item--dropdown-opened > .spw-sidebar-navigation-item__content {\n background: white;\n border-radius: 4px;\n}\n\n.spw-sidebar-navigation-dropdown .spw-sidebar-navigation-item {\n border-radius: 4px;\n &:hover {\n background-color: var(--spw-colors-support-grey-grey-300);\n }\n &.spw-sidebar-navigation-item--active {\n > .spw-sidebar-navigation-item__content > .spw-sidebar-navigation-item__content-label {\n color: var(--spw-ds-primary);\n font-weight: bold;\n }\n }\n}\n","import { Component, h, Prop, Element, State } from '@stencil/core';\n\n@Component({\n tag: 'spw-sidebar-navigation-item',\n styleUrl: 'spw-sidebar-navigation-item.scss',\n shadow: false,\n})\nexport class SpwSidebarNavigationItem {\n @Element() el: HTMLElement;\n\n /** A appliquer sur spw-sidebar-navigation-item, permet de définir un href sur l'élément /\n @Prop() href?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de définir une référence font-awesome sur l'élément /\n @Prop() icon?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de mettre en évidence un état actif /\n @Prop() active: boolean = false;\n /* A appliquer sur spw-sidebar-navigation-item, permet de définir si l'élément est disabled ou non /\n @Prop() disabled: boolean = false;\n /* A appliquer sur spw-sidebar-navigation-item, permet d'afficher une bulle de notification avec un nombre /\n @Prop() bubble?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de définir un tooltip au hover /\n @Prop() tooltipTitle?: string;\n /* A appliquer sur spw-sidebar-navigation-item, permet de choisir la variante d'icônes font-awesome /\n @Prop() iconVariant: 'fa-solid' \| 'fa-brands' \| 'fa-regular' = 'fa-regular';\n /* A appliquer sur spw-sidebar-navigation-item, si true, le clic sur l'item entier ouvre le dropdown (utile quand il n'y a pas de page physique) */\n @Prop() openOnClick: boolean = false;\n\n @State() hasDropdown: boolean = false;\n @State() dropdownOpen: boolean = false;\n @State() navExpanded: boolean = false;\n @State() hasActiveChild: boolean = false;\n\n private mutationObserver?: MutationObserver;\n private bodyClassObserver?: MutationObserver;\n\n componentDidLoad() {\n this.checkForDropdown();\n this.setupMutationObserver();\n this.checkNavExpanded();\n this.setupBodyClassObserver();\n this.propagateActiveStateToParents();\n }\n\n componentDidUpdate() {\n this.checkForDropdown();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n if (this.bodyClassObserver) {\n this.bodyClassObserver.disconnect();\n }\n }\n\n private setupMutationObserver() {\n this.mutationObserver = new MutationObserver(() => {\n this.checkForDropdown();\n });\n\n this.mutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['open'],\n });\n }\n\n private checkForDropdown() {\n const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown') as any;\n this.hasDropdown = dropdown !== null;\n\n if (dropdown) {\n this.dropdownOpen = !!dropdown.open \|\| dropdown.hasAttribute?.('open');\n } else {\n this.dropdownOpen = false;\n }\n }\n\n private checkNavExpanded = () => {\n this.navExpanded = document.body.classList.contains('spw-sidebar-expanded');\n };\n\n private setupBodyClassObserver() {\n this.bodyClassObserver = new MutationObserver(() => {\n this.checkNavExpanded();\n });\n this.bodyClassObserver.observe(document.body, {\n attributes: true,\n attributeFilter: ['class'],\n });\n }\n\n private propagateActiveStateToParents() {\n if (this.active) {\n this.activateParentItems();\n }\n\n const childItems = this.el.querySelectorAll('spw-sidebar-navigation-item');\n const hasActiveDescendant = Array.from(childItems).some((child: any) => child.active === true \|\| child.getAttribute('active') === 'true');\n\n if (hasActiveDescendant) {\n this.hasActiveChild = true;\n this.openDropdown();\n }\n }\n\n private activateParentItems() {\n let parent = this.el.parentElement;\n\n while (parent) {\n const parentItem = parent.closest('spw-sidebar-navigation-item');\n\n if (parentItem && parentItem !== this.el) {\n (parentItem as any).hasActiveChild = true;\n\n const dropdown = parentItem.querySelector(':scope > spw-sidebar-navigation-dropdown') as any;\n if (dropdown) {\n dropdown.open = true;\n dropdown.setAttribute('open', '');\n }\n\n parent = parentItem.parentElement;\n } else {\n break;\n }\n }\n }\n\n private get classes() {\n return {\n 'spw-sidebar-navigation-item': true,\n 'spw-sidebar-navigation-item--active': this.active \|\| this.hasActiveChild,\n 'spw-sidebar-navigation-item--disabled': this.disabled,\n 'spw-sidebar-navigation-item--has-dropdown': this.hasDropdown,\n 'spw-sidebar-navigation-item--dropdown-opened': this.dropdownOpen,\n } as Record<string, boolean>;\n }\n\n private handleDropdownToggle = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.disabled) return;\n\n const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown') as any;\n\n if (dropdown) {\n dropdown.open = !dropdown.open;\n if (dropdown.open) {\n dropdown.setAttribute?.('open', '');\n } else {\n dropdown.removeAttribute?.('open');\n }\n this.dropdownOpen = dropdown.open;\n }\n };\n\n private handleItemClick = (event: MouseEvent) => {\n if (this.disabled) return;\n\n if (this.openOnClick && this.hasDropdown) {\n const clickedElement = event.target as HTMLElement;\n const isChildNavigationItem = clickedElement.closest('spw-sidebar-navigation-item') !== this.el;\n\n if (isChildNavigationItem) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n if (!this.navExpanded) {\n document.body.classList.add('spw-sidebar-expanded');\n setTimeout(() => {\n this.openDropdown();\n }, 300);\n } else {\n this.toggleDropdown();\n }\n }\n };\n\n private openDropdown = () => {\n const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown') as any;\n if (dropdown) {\n dropdown.open = true;\n dropdown.setAttribute?.('open', '');\n this.dropdownOpen = true;\n }\n };\n\n private toggleDropdown = () => {\n const dropdown = this.el.querySelector('spw-sidebar-navigation-dropdown') as any;\n if (dropdown) {\n dropdown.open = !dropdown.open;\n if (dropdown.open) {\n dropdown.setAttribute?.('open', '');\n } else {\n dropdown.removeAttribute?.('open');\n }\n this.dropdownOpen = dropdown.open;\n }\n };\n\n render() {\n const Tag = this.href && !this.disabled && !this.openOnClick ? 'a' : 'div';\n\n const iconContent = <spw-icon variant={this.iconVariant} icon={this.icon}></spw-icon>;\n\n const iconDiv = (\n <div class=\"spw-sidebar-navigation-item__icon\">\n {this.bubble && <span class=\"spw-sidebar-navigation-item__bubble\">{this.bubble}</span>}\n {iconContent}\n </div>\n );\n\n const iconWithBubble = this.tooltipTitle ? (\n <spw-tooltip cursor={this.disabled ? 'disabled' : 'pointer'} tooltip-title={this.tooltipTitle} direction=\"right\" visible={!this.navExpanded}>\n {iconDiv}\n </spw-tooltip>\n ) : (\n iconDiv\n );\n\n const toggleClasses = {\n 'spw-sidebar-navigation-item__dropdown-toggle': true,\n 'spw-sidebar-navigation-item__dropdown-toggle--open': this.dropdownOpen,\n } as Record<string, boolean>;\n\n return (\n <Tag\n class={this.classes}\n href={this.openOnClick ? undefined : this.href}\n aria-disabled={this.disabled ? 'true' : undefined}\n tabIndex={this.disabled ? -1 : 0}\n onClick={this.openOnClick ? this.handleItemClick : undefined}\n >\n {this.icon && iconWithBubble}\n\n <div class=\"spw-sidebar-navigation-item__content\">\n <div class=\"spw-sidebar-navigation-item__content-label\">\n <slot></slot>\n </div>\n\n {this.hasDropdown && (\n <div class={toggleClasses} onClick={this.handleDropdownToggle} tabIndex={this.disabled ? -1 : 0}>\n <spw-icon icon=\"fa-chevron-down\"></spw-icon>\n </div>\n )}\n\n <slot name=\"dropdown\"></slot>\n </div>\n </Tag>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/spw-stencil-library/spw-sidebar.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-sidebar.entry.esm.js","sources":["src/components/spw-sidebar/spw-sidebar.scss?tag=spw-sidebar&encapsulation=shadow","src/components/spw-sidebar/spw-sidebar.tsx"],"sourcesContent":[":host {\n display: block;\n height: 100%;\n}\n\n.spw-sidebar {\n height: 100%;\n width: var(--spw-ds-bo-sidebar-width);\n transition: width 0.2s ease;\n display: flex;\n flex-direction: column;\n background: white;\n border-right: 1px solid var(--spw-colors-support-grey-grey-300);\n position: fixed;\n top: 0;\n left: 0;\n\n &--with-topbar {\n top: var(--spw-ds-bo-topbar-height);\n height: calc(100% - var(--spw-ds-bo-topbar-height));\n }\n\n &__toggle {\n position: absolute;\n right: 0;\n top: 67px;\n flex-basis: auto;\n width: 20px;\n padding: 6px 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n box-shadow: var(--spw-effect-elevation-6);\n border: 1px solid var(--spw-colors-support-grey-grey-300);\n cursor: pointer;\n font-size: 13px;\n z-index: 20;\n transform: translateX(50%);\n background: white;\n line-height: 1;\n spw-icon {\n position: relative;\n transition: transform 0.15s 0.2s ease;\n .spw-sidebar--expanded & {\n transform: rotate(180deg);\n }\n }\n }\n\n &__content {\n overflow: hidden;\n flex: 1 1 auto;\n overflow-y: auto;\n padding: 16px 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n @include scrollbars(var(--spw-color-themes-grey-grey-400), var(--spw-ds-white));\n }\n\n &--expanded {\n width: var(--spw-ds-bo-sidebar-expanded-width);\n }\n\n &--collapsed {\n width: var(--spw-ds-bo-sidebar-width);\n }\n\n &__resize-border {\n display: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 10px;\n height: 100%;\n transform: translateX(50%);\n cursor: col-resize;\n align-items: center;\n justify-content: center;\n background: transparent;\n z-index: 10;\n }\n}\n","import { Component, h, Host, Element, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'spw-sidebar',\n styleUrl: 'spw-sidebar.scss',\n shadow: true,\n})\nexport class SpwSidebar {\n @Element() el!: HTMLElement;\n\n /** Si true, la sidebar est dépliée par défaut */\n @Prop() defaultExpanded: boolean = false;\n\n @State() expanded: boolean;\n @State() hasTopbar: boolean = false;\n\n private readonly BODY_CLASS = 'spw-sidebar-expanded';\n private observer: MutationObserver;\n\n componentWillLoad() {\n this.expanded = this.defaultExpanded;\n if (this.expanded) {\n document.body.classList.add(this.BODY_CLASS);\n }\n\n this.checkTopbarClass();\n this.observeBodyClassChanges();\n }\n\n disconnectedCallback() {\n document.body.classList.remove(this.BODY_CLASS);\n this.observer?.disconnect();\n }\n\n private toggleSidebar = () => {\n this.expanded = !this.expanded;\n document.body.classList.toggle(this.BODY_CLASS, this.expanded);\n };\n\n private checkTopbarClass = () => {\n this.hasTopbar = document.body.classList.contains('has-topbar');\n };\n\n private observeBodyClassChanges() {\n this.observer = new MutationObserver(() => {\n this.checkTopbarClass();\n });\n\n this.observer.observe(document.body, {\n attributes: true,\n attributeFilter: ['class'],\n });\n }\n\n private get hostClass() {\n return {\n '--expanded': this.expanded,\n '--collapsed': !this.expanded,\n };\n }\n\n private get elementClass() {\n return {\n 'spw-sidebar': true,\n 'spw-sidebar--expanded': this.expanded,\n 'spw-sidebar--collapsed': !this.expanded,\n 'spw-sidebar--with-topbar': this.hasTopbar,\n };\n }\n\n render() {\n return (\n <Host class={this.hostClass}>\n <div class={this.elementClass}>\n <span class=\"spw-sidebar__toggle\" onClick={this.toggleSidebar} aria-expanded={this.expanded.toString()}>\n <spw-icon icon=\"fa-chevron-right\"></spw-icon>\n </span>\n <div class=\"spw-sidebar__content\">\n <slot name=\"navigation-top\"></slot>\n <slot name=\"navigation-bottom\"></slot>\n </div>\n <div class=\"spw-sidebar__resize-border\" onClick={this.toggleSidebar}></div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,4zIAA4zI;;MCOr0I,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AASU,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AAG/B,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAElB,QAAA,IAAU,CAAA,UAAA,GAAG,sBAAsB;AAkB5C,QAAA,IAAa,CAAA,aAAA,GAAG,MAAK;AAC3B,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;AAC9B,YAAA,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC;AAChE,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC;AACjE,SAAC;~~AA6CF~~;~~IAnEC~~,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe;AACpC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;;QAG9C,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,uBAAuB,EAAE;;IAGhC,oBAAoB,GAAA;;QAClB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;QAC/C,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;;~~IAYrB~~,uBAAuB,GAAA;AAC7B,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;YACxC,IAAI,CAAC,gBAAgB,EAAE;~~AACzB~~,SAAC,CAAC;QAEF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AACnC,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,OAAO,CAAC;AAC3B,SAAA,CAAC;;AAGJ,IAAA,IAAY,SAAS,GAAA;QACnB,OAAO;YACL,YAAY,EAAE,IAAI,CAAC,QAAQ;AAC3B,YAAA,aAAa,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC9B;;AAGH,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,aAAa,EAAE,IAAI;YACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;AACtC,YAAA,wBAAwB,EAAE,CAAC,IAAI,CAAC,QAAQ;YACxC,0BAA0B,EAAE,IAAI,CAAC,SAAS;SAC3C;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAA,EACzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,mBAAiB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAA,EACpG,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,kBAAkB,EAAA,CAAY,CACxC,EACP,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,gBAAgB,EAAQ,CAAA,EACnC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,mBAAmB,EAAA,CAAQ,CAClC,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,EAAA,CAAQ,CACvE,CACD;;;;;;;;"}
1	+ {"version":3,"file":"spw-sidebar.entry.esm.js","sources":["src/components/spw-sidebar/spw-sidebar.scss?tag=spw-sidebar&encapsulation=shadow","src/components/spw-sidebar/spw-sidebar.tsx"],"sourcesContent":[":host {\n display: block;\n height: 100%;\n}\n\n.spw-sidebar {\n height: 100%;\n width: var(--spw-ds-bo-sidebar-width);\n transition: width 0.2s ease;\n display: flex;\n flex-direction: column;\n background: white;\n border-right: 1px solid var(--spw-colors-support-grey-grey-300);\n position: fixed;\n top: 0;\n left: 0;\n\n &--with-topbar {\n top: var(--spw-ds-bo-topbar-height);\n height: calc(100% - var(--spw-ds-bo-topbar-height));\n }\n\n &__toggle {\n position: absolute;\n right: 0;\n top: 67px;\n flex-basis: auto;\n width: 20px;\n padding: 6px 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n box-shadow: var(--spw-effect-elevation-6);\n border: 1px solid var(--spw-colors-support-grey-grey-300);\n cursor: pointer;\n font-size: 13px;\n z-index: 20;\n transform: translateX(50%);\n background: white;\n line-height: 1;\n spw-icon {\n position: relative;\n transition: transform 0.15s 0.2s ease;\n .spw-sidebar--expanded & {\n transform: rotate(180deg);\n }\n }\n }\n\n &__content {\n overflow: hidden;\n flex: 1 1 auto;\n overflow-y: auto;\n padding: 16px 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n @include scrollbars(var(--spw-color-themes-grey-grey-400), var(--spw-ds-white));\n }\n\n &--expanded {\n width: var(--spw-ds-bo-sidebar-expanded-width);\n }\n\n &--collapsed {\n width: var(--spw-ds-bo-sidebar-width);\n }\n\n &__resize-border {\n display: none;\n position: absolute;\n top: 0;\n right: 0;\n width: 10px;\n height: 100%;\n transform: translateX(50%);\n cursor: col-resize;\n align-items: center;\n justify-content: center;\n background: transparent;\n z-index: 10;\n }\n}\n","import { Component, h, Host, Element, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'spw-sidebar',\n styleUrl: 'spw-sidebar.scss',\n shadow: true,\n})\nexport class SpwSidebar {\n @Element() el!: HTMLElement;\n\n /** Si true, la sidebar est dépliée par défaut */\n @Prop() defaultExpanded: boolean = false;\n\n @State() expanded: boolean;\n @State() hasTopbar: boolean = false;\n\n private readonly BODY_CLASS = 'spw-sidebar-expanded';\n private observer: MutationObserver;\n\n componentWillLoad() {\n this.expanded = this.defaultExpanded;\n if (this.expanded) {\n document.body.classList.add(this.BODY_CLASS);\n }\n\n this.checkTopbarClass();\n this.observeBodyClassChanges();\n }\n\n disconnectedCallback() {\n document.body.classList.remove(this.BODY_CLASS);\n this.observer?.disconnect();\n }\n\n private toggleSidebar = () => {\n this.expanded = !this.expanded;\n document.body.classList.toggle(this.BODY_CLASS, this.expanded);\n };\n\n private checkTopbarClass = () => {\n this.hasTopbar = document.body.classList.contains('has-topbar');\n };\n\n private checkExpandedState = () => {\n // Synchronise l'état interne avec la classe body\n const bodyHasExpandedClass = document.body.classList.contains(this.BODY_CLASS);\n if (this.expanded !== bodyHasExpandedClass) {\n this.expanded = bodyHasExpandedClass;\n }\n };\n\n private observeBodyClassChanges() {\n this.observer = new MutationObserver(() => {\n this.checkTopbarClass();\n this.checkExpandedState();\n });\n\n this.observer.observe(document.body, {\n attributes: true,\n attributeFilter: ['class'],\n });\n }\n\n private get hostClass() {\n return {\n '--expanded': this.expanded,\n '--collapsed': !this.expanded,\n };\n }\n\n private get elementClass() {\n return {\n 'spw-sidebar': true,\n 'spw-sidebar--expanded': this.expanded,\n 'spw-sidebar--collapsed': !this.expanded,\n 'spw-sidebar--with-topbar': this.hasTopbar,\n };\n }\n\n render() {\n return (\n <Host class={this.hostClass}>\n <div class={this.elementClass}>\n <span class=\"spw-sidebar__toggle\" onClick={this.toggleSidebar} aria-expanded={this.expanded.toString()}>\n <spw-icon icon=\"fa-chevron-right\"></spw-icon>\n </span>\n <div class=\"spw-sidebar__content\">\n <slot name=\"navigation-top\"></slot>\n <slot name=\"navigation-bottom\"></slot>\n </div>\n <div class=\"spw-sidebar__resize-border\" onClick={this.toggleSidebar}></div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/spw-stencil-library/spw-skeleton.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-skeleton.entry.esm.js","sources":["src/components/spw-skeleton/spw-skeleton.scss?tag=spw-skeleton&encapsulation=shadow","src/components/spw-skeleton/spw-skeleton.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n%animation {\n background: linear-gradient(90deg, white 0%, var(--spw-color-themes-grey-grey-300) 50%, white 100%);\n background-size: 200% 100%;\n animation: shimmer 5s infinite linear;\n}\n\n.spw-skeleton {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n &__line {\n height: 1rem;\n width: 100%;\n border-radius: 4px;\n @extend %animation;\n }\n\n &__line--even {\n width: 85%;\n }\n\n &__line--last {\n width: 50% !important;\n }\n\n &__buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 24px;\n gap: 24px;\n }\n\n &__button {\n width: 200px;\n height: 40px;\n border-radius: 40px;\n @extend %animation;\n }\n\n &__article {\n &-image {\n margin-bottom: 24px;\n border-radius: 8px;\n height: 170px;\n @extend %animation;\n }\n }\n\n &__text {\n &-block {\n margin: 24px 0;\n border-radius: 4px;\n height: 60px;\n @extend %animation;\n }\n }\n}\n\n@keyframes shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-skeleton',\n styleUrl: 'spw-skeleton.scss',\n shadow: true,\n})\nexport class SpwSkeleton {\n /** Nombre de répétitions du skeleton (uniquement valable pour la variante lines) /\n @Prop() blocks: number = 1;\n\n /* Type de skeleton à afficher */\n @Prop() variant: 'lines' \| 'text' \| 'article' \| 'layout' = 'lines';\n\n private renderLines() {\n return Array.from({ length: this.blocks }, (_, index) => {\n const isLast = index === this.blocks - 1;\n const isEven = index % 2 === 1;\n const isOdd = index % 2 === 0;\n\n return (\n <div\n class={{\n 'spw-skeleton__line': true,\n 'spw-skeleton__line--last': isLast,\n 'spw-skeleton__line--even': !isLast && isEven,\n 'spw-skeleton__line--odd': !isLast && isOdd,\n }}\n ></div>\n );\n });\n }\n\n private renderText() {\n return (\n <div class=\"spw-skeleton__text\">\n <spw-skeleton variant=\"lines\" blocks={5}></spw-skeleton>\n <div class=\"spw-skeleton__text-block\"></div>\n <spw-skeleton variant=\"lines\" blocks={2}></spw-skeleton>\n </div>\n );\n }\n\n private renderArticle() {\n return (\n <div class=\"spw-skeleton__article\">\n <div class=\"spw-skeleton__article-image\"></div>\n <spw-skeleton variant=\"lines\" blocks={7}></spw-skeleton>\n </div>\n );\n }\n\n private renderTextButtons() {\n return (\n <div class=\"spw-skeleton__text-buttons\">\n <spw-skeleton variant=\"lines\" blocks={3}></spw-skeleton>\n <div class=\"spw-skeleton__buttons\">\n <div class=\"spw-skeleton__button\"></div>\n <div class=\"spw-skeleton__button\"></div>\n </div>\n </div>\n );\n }\n\n private renderVariant() {\n switch (this.variant) {\n case 'text':\n return this.renderText();\n case 'article':\n return this.renderArticle();\n case 'layout':\n return this.renderTextButtons();\n case 'lines':\n default:\n return this.renderLines();\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"spw-skeleton\">\n {this.renderVariant()}\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG,g6GAAg6G;;MCO16G,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAW,CAAC;;AAGlB,QAAA,IAAO,CAAA,OAAA,GAA4C,OAAO;~~AA4EnE~~;~~IA1ES~~,WAAW,GAAA;AACjB,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;YACtD,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC;AACxC,YAAA,MAAM,MAAM,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC;AAC9B,YAAA,MAAM,KAAK,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC;~~AAE7B~~,YAAA,QACE,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE;AACL,oBAAA,oBAAoB,EAAE,IAAI;AAC1B,oBAAA,0BAA0B,EAAE,MAAM;AAClC,oBAAA,0BAA0B,EAAE,CAAC,MAAM,IAAI,MAAM;AAC7C,oBAAA,yBAAyB,EAAE,CAAC,MAAM,IAAI,KAAK;iBAC5C,EAAA,CACI;AAEX,SAAC,CAAC;;IAGI,UAAU,GAAA;QAChB,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,cAAA,EAAA,EAAc,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAiB,CAAA,EACxD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAO,CAAA,EAC5C,CAAc,CAAA,cAAA,EAAA,EAAA,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAA,CAAiB,CACpD;;IAIF,aAAa,GAAA;AACnB,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,6BAA6B,EAAO,CAAA,EAC/C,CAAc,CAAA,cAAA,EAAA,EAAA,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAA,CAAiB,CACpD;;IAIF,iBAAiB,GAAA;AACvB,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAA,EACrC,CAAA,CAAA,cAAA,EAAA,EAAc,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAiB,CAAA,EACxD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,EAAO,CAAA,EACxC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,sBAAsB,GAAO,CACpC,CACF;;IAIF,aAAa,GAAA;AACnB,QAAA,QAAQ,IAAI,CAAC,OAAO;AAClB,YAAA,KAAK,MAAM;AACT,gBAAA,OAAO,IAAI,CAAC,UAAU,EAAE;AAC1B,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,IAAI,CAAC,aAAa,EAAE;AAC7B,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE;AACjC,YAAA,KAAK,OAAO;AACZ,YAAA;AACE,gBAAA,OAAO,IAAI,CAAC,WAAW,EAAE;;;IAI/B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,IAAI,CAAC,aAAa,EAAE,EACrB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}
1	+ {"version":3,"file":"spw-skeleton.entry.esm.js","sources":["src/components/spw-skeleton/spw-skeleton.scss?tag=spw-skeleton&encapsulation=shadow","src/components/spw-skeleton/spw-skeleton.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n%animation {\n background: linear-gradient(90deg, white 0%, var(--spw-color-themes-grey-grey-300) 50%, white 100%);\n background-size: 200% 100%;\n animation: shimmer 5s infinite linear;\n}\n\n.spw-skeleton {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n &__line {\n height: 1rem;\n width: 100%;\n border-radius: 4px;\n @extend %animation;\n }\n\n &__line--even {\n width: 85%;\n }\n\n &__line--last {\n width: 50% !important;\n }\n\n &__buttons {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 24px;\n gap: 24px;\n }\n\n &__button {\n width: 200px;\n height: 40px;\n border-radius: 40px;\n @extend %animation;\n }\n\n &__article {\n &-image {\n margin-bottom: 24px;\n border-radius: 8px;\n height: 170px;\n @extend %animation;\n }\n }\n\n &__text {\n &-block {\n margin: 24px 0;\n border-radius: 4px;\n height: 60px;\n @extend %animation;\n }\n }\n}\n\n@keyframes shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-skeleton',\n styleUrl: 'spw-skeleton.scss',\n shadow: true,\n})\nexport class SpwSkeleton {\n /** Nombre de répétitions du skeleton (uniquement valable pour la variante lines) /\n @Prop() blocks: number = 1;\n\n /* Type de skeleton à afficher */\n @Prop() variant: 'lines' \| 'text' \| 'article' \| 'layout' = 'lines';\n\n private renderLines() {\n return Array.from({ length: this.blocks }, (_, index) => {\n const isLast = index === this.blocks - 1;\n const isEven = index % 2 === 1;\n const isOdd = index % 2 === 0;\n const isOnly = this.blocks === 1;\n\n return (\n <div\n class={{\n 'spw-skeleton__line': true,\n 'spw-skeleton__line--only': isOnly,\n 'spw-skeleton__line--last': !isOnly && isLast,\n 'spw-skeleton__line--even': !isLast && isEven,\n 'spw-skeleton__line--odd': !isLast && isOdd,\n }}\n ></div>\n );\n });\n }\n\n private renderText() {\n return (\n <div class=\"spw-skeleton__text\">\n <spw-skeleton variant=\"lines\" blocks={5}></spw-skeleton>\n <div class=\"spw-skeleton__text-block\"></div>\n <spw-skeleton variant=\"lines\" blocks={2}></spw-skeleton>\n </div>\n );\n }\n\n private renderArticle() {\n return (\n <div class=\"spw-skeleton__article\">\n <div class=\"spw-skeleton__article-image\"></div>\n <spw-skeleton variant=\"lines\" blocks={7}></spw-skeleton>\n </div>\n );\n }\n\n private renderTextButtons() {\n return (\n <div class=\"spw-skeleton__text-buttons\">\n <spw-skeleton variant=\"lines\" blocks={3}></spw-skeleton>\n <div class=\"spw-skeleton__buttons\">\n <div class=\"spw-skeleton__button\"></div>\n <div class=\"spw-skeleton__button\"></div>\n </div>\n </div>\n );\n }\n\n private renderVariant() {\n switch (this.variant) {\n case 'text':\n return this.renderText();\n case 'article':\n return this.renderArticle();\n case 'layout':\n return this.renderTextButtons();\n case 'lines':\n default:\n return this.renderLines();\n }\n }\n\n render() {\n return (\n <Host>\n <div class=\"spw-skeleton\">\n {this.renderVariant()}\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG,g6GAAg6G;;MCO16G,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAW,CAAC;;AAGlB,QAAA,IAAO,CAAA,OAAA,GAA4C,OAAO;AA8EnE;IA5ES,WAAW,GAAA;AACjB,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;YACtD,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC;AACxC,YAAA,MAAM,MAAM,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC;AAC9B,YAAA,MAAM,KAAK,GAAG,KAAK,GAAG,CAAC,KAAK,CAAC;AAC7B,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,KAAK,CAAC;AAEhC,YAAA,QACE,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE;AACL,oBAAA,oBAAoB,EAAE,IAAI;AAC1B,oBAAA,0BAA0B,EAAE,MAAM;AAClC,oBAAA,0BAA0B,EAAE,CAAC,MAAM,IAAI,MAAM;AAC7C,oBAAA,0BAA0B,EAAE,CAAC,MAAM,IAAI,MAAM;AAC7C,oBAAA,yBAAyB,EAAE,CAAC,MAAM,IAAI,KAAK;iBAC5C,EAAA,CACI;AAEX,SAAC,CAAC;;IAGI,UAAU,GAAA;QAChB,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,cAAA,EAAA,EAAc,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAiB,CAAA,EACxD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAO,CAAA,EAC5C,CAAc,CAAA,cAAA,EAAA,EAAA,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAA,CAAiB,CACpD;;IAIF,aAAa,GAAA;AACnB,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,6BAA6B,EAAO,CAAA,EAC/C,CAAc,CAAA,cAAA,EAAA,EAAA,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAA,CAAiB,CACpD;;IAIF,iBAAiB,GAAA;AACvB,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAA,EACrC,CAAA,CAAA,cAAA,EAAA,EAAc,OAAO,EAAC,OAAO,EAAC,MAAM,EAAE,CAAC,EAAiB,CAAA,EACxD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,EAAO,CAAA,EACxC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,sBAAsB,GAAO,CACpC,CACF;;IAIF,aAAa,GAAA;AACnB,QAAA,QAAQ,IAAI,CAAC,OAAO;AAClB,YAAA,KAAK,MAAM;AACT,gBAAA,OAAO,IAAI,CAAC,UAAU,EAAE;AAC1B,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,IAAI,CAAC,aAAa,EAAE;AAC7B,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE;AACjC,YAAA,KAAK,OAAO;AACZ,YAAA;AACE,gBAAA,OAAO,IAAI,CAAC,WAAW,EAAE;;;IAI/B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,IAAI,CAAC,aAAa,EAAE,EACrB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}