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

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

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 (590) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-card-content.entry.esm.js","sources":["src/components/spw-card/spw-card-content/spw-card-content.scss?tag=spw-card-content&encapsulation=shadow","src/components/spw-card/spw-card-content/spw-card-content.tsx"],"sourcesContent":[":host(.--video) {\n min-width: 100%;\n width: 100%;\n}\n\n.spw-card-content {\n position: relative;\n display: flex;\n flex-direction: column;\n padding: 12px 24px 24px 24px;\n z-index: 5;\n\n :host(.--vertical) & {\n padding: 24px;\n ::slotted(spw-card-subtags) {\n margin-top: 12px;\n }\n }\n\n :host(.--event) & {\n padding: ~~12px~~ 24px ~~24px 64px~~;\n ::slotted(spw-card-subtags) {\n margin-top: 12px;\n }\n }\n\n :host(.--sidebar) & {\n padding: 0;\n }\n\n :host(.--vertical) &,\n :host(.--sidebar) &,\n :host(.--event) & {\n justify-content: center;\n height: 100%;\n }\n\n :host(.--video) & {\n justify-content: flex-end;\n height: 100%;\n padding-right: 80px;\n &:after {\n position: absolute;\n bottom: 24px;\n right: 24px;\n font-family: var(--spw-ds-font-icons-solid);\n font-weight: 900;\n content: '\\f144';\n font-size: 36px;\n color: white;\n }\n }\n\n &__tag {\n position: absolute;\n top: -25px;\n left: 25px;\n padding: 6px 10px;\n border-radius: 4px 4px 0px 0px;\n background: var(--spw-ds-white);\n color: var(--spw-ds-primary);\n font-size: 15px;\n font-weight: 700;\n\n :host(.--no-image) &,\n :host(.--event) &,\n :host(.--video) &,\n :host(.--vertical) & {\n position: relative;\n top: 0;\n left: 0;\n padding: 0;\n margin-bottom: 8px;\n }\n\n :host(.--video) & {\n width: auto;\n align-self: flex-start;\n display: inline-block;\n padding: 8px 12px;\n border-radius: 9999px;\n line-height: 1;\n color: var(--spw-color-themes-grey-grey-900);\n box-shadow: var(--spw-effect-elevation-3);\n font-size: 14px;\n background: var(--spw-ds-white);\n }\n }\n\n &__date {\n margin-bottom: 7px;\n font-size: 15px;\n font-weight: 300;\n color: var(--spw-color-themes-grey-grey-600);\n }\n}\n","import { Element, Component, State, Prop, h } from '@stencil/core';\nimport { formatDate } from '@utils/utils';\n\n@Component({\n tag: 'spw-card-content',\n styleUrl: 'spw-card-content.scss',\n shadow: true,\n})\nexport class SpwCardContent {\n @Element() el: HTMLSpwCardContentElement;\n @State() hasImage: boolean;\n\n /** Tag spécifié dans la carte /\n @Prop() tag?: string;\n /* Date de publication */\n @Prop() date?: string;\n\n render() {\n return (\n <div class=\"spw-card-content\">\n {this.tag && <span class=\"spw-card-content__tag\">{this.tag}</span>}\n {this.date && (\n <time date-time={this.date} class=\"spw-card-content__date\">\n {formatDate(this.date)}\n </time>\n )}\n <slot></slot>\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,iBAAiB,GAAG,~~stIAAstI~~;;~~MCQnuI~~,cAAc,GAAA,MAAA;;;;IASzB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC1B,IAAI,CAAC,GAAG,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAE,EAAA,IAAI,CAAC,GAAG,CAAQ,EACjE,IAAI,CAAC,IAAI,KACR,0EAAiB,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,wBAAwB,EAAA,EACvD,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CACjB,CACR,EACD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;"}
1	+ {"version":3,"file":"spw-card-content.entry.esm.js","sources":["src/components/spw-card/spw-card-content/spw-card-content.scss?tag=spw-card-content&encapsulation=shadow","src/components/spw-card/spw-card-content/spw-card-content.tsx"],"sourcesContent":[":host(.--video) {\n min-width: 100%;\n width: 100%;\n}\n\n.spw-card-content {\n position: relative;\n display: flex;\n flex-direction: column;\n padding: 12px 24px 24px 24px;\n z-index: 5;\n\n :host(.--vertical) & {\n padding: 24px;\n ::slotted(spw-card-subtags) {\n margin-top: 12px;\n }\n }\n\n :host(.--event) & {\n padding: 24px;\n ::slotted(spw-card-subtags) {\n margin-top: 12px;\n }\n }\n\n :host(.--no-image.--event) & {\n padding-left: 64px;\n padding-top: 12px;\n }\n\n :host(.--sidebar) & {\n padding: 0;\n }\n\n :host(.--people) & {\n padding: 24px;\n flex-direction: row;\n gap: 24px;\n }\n\n :host(.--vertical) &,\n :host(.--sidebar) &,\n :host(.--event) & {\n justify-content: center;\n height: 100%;\n }\n\n :host(.--video) & {\n justify-content: flex-end;\n height: 100%;\n padding-right: 80px;\n &:after {\n position: absolute;\n bottom: 24px;\n right: 24px;\n font-family: var(--spw-ds-font-icons-solid);\n font-weight: 900;\n content: '\\f144';\n font-size: 36px;\n color: white;\n }\n }\n\n &__tag {\n position: absolute;\n top: -25px;\n left: 25px;\n padding: 6px 10px;\n border-radius: 4px 4px 0px 0px;\n background: var(--spw-ds-white);\n color: var(--spw-ds-primary);\n font-size: 15px;\n font-weight: 700;\n\n :host(.--no-image) &,\n :host(.--event) &,\n :host(.--video) &,\n :host(.--vertical) & {\n position: relative;\n top: 0;\n left: 0;\n padding: 0;\n margin-bottom: 8px;\n }\n\n :host(.--video) & {\n width: auto;\n align-self: flex-start;\n display: inline-block;\n padding: 8px 12px;\n border-radius: 9999px;\n line-height: 1;\n color: var(--spw-color-themes-grey-grey-900);\n box-shadow: var(--spw-effect-elevation-3);\n font-size: 14px;\n background: var(--spw-ds-white);\n }\n }\n\n &__date {\n margin-bottom: 7px;\n font-size: 15px;\n font-weight: 300;\n color: var(--spw-color-themes-grey-grey-600);\n }\n\n ::slotted(spw-card) {\n --spw-card-background: var(--spw-color-themes-grey-grey-50);\n --spw-card-box-shadow: none;\n --spw-card-border: 1px solid var(--spw-color-themes-grey-grey-300);\n }\n}\n","import { Element, Component, State, Prop, h } from '@stencil/core';\nimport { formatDate } from '@utils/utils';\n\n@Component({\n tag: 'spw-card-content',\n styleUrl: 'spw-card-content.scss',\n shadow: true,\n})\nexport class SpwCardContent {\n @Element() el: HTMLSpwCardContentElement;\n @State() hasImage: boolean;\n\n /** Tag spécifié dans la carte /\n @Prop() tag?: string;\n /* Date de publication */\n @Prop() date?: string;\n\n render() {\n return (\n <div class=\"spw-card-content\">\n {this.tag && <span class=\"spw-card-content__tag\">{this.tag}</span>}\n {this.date && (\n <time date-time={this.date} class=\"spw-card-content__date\">\n {formatDate(this.date)}\n </time>\n )}\n <slot></slot>\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,iBAAiB,GAAG,iiJAAiiJ;;MCQ9iJ,cAAc,GAAA,MAAA;;;;IASzB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC1B,IAAI,CAAC,GAAG,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAE,EAAA,IAAI,CAAC,GAAG,CAAQ,EACjE,IAAI,CAAC,IAAI,KACR,0EAAiB,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,wBAAwB,EAAA,EACvD,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CACjB,CACR,EACD,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-card-excerpt.entry.esm.js","sources":["src/components/spw-card/spw-card-excerpt/spw-card-excerpt.scss?tag=spw-card-excerpt&encapsulation=shadow","src/components/spw-card/spw-card-excerpt/spw-card-excerpt.tsx"],"sourcesContent":[".spw-card-excerpt {\n color: var(--spw-color-themes-grey-grey-600);\n font-family: 'Nunito Sans';\n font-size: 16px;\n line-height: 1.3;\n margin-top: 12px;\n &--has-clamp {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n }\n @for $i from 1 through 10 {\n &--clamp-#{$i} {\n -webkit-line-clamp: $i;\n line-clamp: $i;\n }\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-card-excerpt',\n styleUrl: 'spw-card-excerpt.scss',\n shadow: true,\n})\nexport class SpwCardExcerpt {\n /** Permet de limiter ou pas le nombre de lignes affichées */\n @Prop() lineClamp: number \| 'none' = 3;\n\n private get elementClass(): { [className: string]: boolean } {\n const hasLineClamp = this.lineClamp !== 'none';\n return {\n 'spw-card-excerpt': true,\n 'spw-card-excerpt--has-clamp': hasLineClamp,\n [`spw-card-excerpt--clamp-${this.lineClamp}`]: hasLineClamp,\n };\n }\n\n render() {\n return (\n <div class={this.elementClass}>\n <slot></slot>\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,~~45GAA45G~~;;~~MCOz6G~~,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAS,CAAA,SAAA,GAAoB,CAAC;~~AAkBvC~~;~~AAhBC~~,IAAA,IAAY,YAAY,GAAA;AACtB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM;QAC9C,OAAO;AACL,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,6BAA6B,EAAE,YAAY;AAC3C,YAAA,CAAC,2BAA2B,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,YAAY;SAC5D;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,~~CAAK~~,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAA~~,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC3B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;"}
1	+ {"version":3,"file":"spw-card-excerpt.entry.esm.js","sources":["src/components/spw-card/spw-card-excerpt/spw-card-excerpt.scss?tag=spw-card-excerpt&encapsulation=shadow","src/components/spw-card/spw-card-excerpt/spw-card-excerpt.tsx"],"sourcesContent":[":host(.--people) {\n flex: 1;\n ::slotted(spw-link) {\n --spw-link-color: #000;\n --spw-link-hover-color: #000;\n --spw-link-active-color: #000;\n --spw-link-font-weight: 400;\n }\n}\n\n.spw-card-excerpt {\n color: var(--spw-color-themes-grey-grey-600);\n font-family: 'Nunito Sans';\n font-size: 16px;\n line-height: 1.3;\n margin-top: 12px;\n &--has-clamp {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n }\n :host(.--people) & {\n margin-top: 0;\n font-size: 16px;\n color: var(--spw-color-themes-grey-grey-900);\n }\n :host(.--sidebar) & {\n margin-top: 8px;\n }\n @for $i from 1 through 10 {\n &--clamp-#{$i} {\n -webkit-line-clamp: $i;\n line-clamp: $i;\n }\n }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-card-excerpt',\n styleUrl: 'spw-card-excerpt.scss',\n shadow: true,\n})\nexport class SpwCardExcerpt {\n /** Permet de limiter ou pas le nombre de lignes affichées */\n @Prop() lineClamp: number \| 'none' = 3;\n\n private get elementClass(): { [className: string]: boolean } {\n const hasLineClamp = this.lineClamp !== 'none';\n return {\n 'spw-card-excerpt': true,\n 'spw-card-excerpt--has-clamp': hasLineClamp,\n [`spw-card-excerpt--clamp-${this.lineClamp}`]: hasLineClamp,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.elementClass}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,iuHAAiuH;;MCO9uH,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAS,CAAA,SAAA,GAAoB,CAAC;AAoBvC;AAlBC,IAAA,IAAY,YAAY,GAAA;AACtB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM;QAC9C,OAAO;AACL,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,6BAA6B,EAAE,YAAY;AAC3C,YAAA,CAAC,2BAA2B,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,YAAY;SAC5D;;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,EAC3B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-card-image.entry.esm.js","sources":["src/components/spw-card/spw-card-image/spw-card-image.scss?tag=spw-card-image&encapsulation=shadow","src/components/spw-card/spw-card-image/spw-card-image.tsx"],"sourcesContent":["@import '../../../scss/mixins';\n\n:host {\n display: block;\n width: ~~100%;\~~n ~~line~~-~~height~~: 1;\n}\n\n.spw-card-image {\n position: relative;\n overflow: hidden;\n border-radius: 5px 5px 0 0;\n\n :host(.--vertical) & {\n border-radius: 5px 0 0 5px;\n }\n\n :host(.--video) &,\n :host(.--sidebar) & {\n border-radius: 5px;\n }\n\n ::slotted(img),\n img {\n width: 100%;\n height: auto;\n transition: all 0.3s ease;\n transform-origin: center center;\n }\n\n &__icon {\n &:before {\n @include blanket;\n background: var(--spw-ds-primary);\n opacity: 0.4;\n }\n position: absolute;\n z-index: 2;\n display: flex;\n visibility: hidden;\n width: 100%;\n height: 100%;\n font-size: 30px;\n font-weight: 300;\n opacity: 0;\n top: 0;\n left: 0;\n color: white;\n justify-content: center;\n align-items: center;\n transition: all 0.3s ease;\n\n spw-icon {\n transform: scale(1.5);\n transition: all 0.3s ease;\n }\n }\n\n &__label {\n position: absolute;\n top: 10px;\n right: 10px;\n display: inline-flex;\n padding: 8px 12px;\n align-items: center;\n border-radius: 9999px;\n color: var(--spw-color-themes-grey-grey-900);\n box-shadow: var(--spw-effect-elevation-3);\n font-size: 14px;\n background: var(--spw-ds-white);\n z-index: 3;\n line-height: 1;\n }\n}\n\n:host(.--hovered:not(.--video)) {\n .spw-card-image,\n .spw-card-image.--is-hovered {\n .spw-card-image__icon {\n visibility: visible;\n opacity: 1;\n spw-icon {\n transform: scale(1);\n }\n }\n ::slotted(img) {\n transform: scale(1.1);\n }\n }\n}\n\n:host(.--vertical) {\n width: 170px;\n min-width: 170px;\n position: relative;\n overflow: hidden;\n .spw-card-image {\n height: 100%;\n ::slotted(img) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100% !important;\n object-fit: cover;\n object-position: center;\n }\n }\n}\n\n:host(.--sidebar) {\n width: 75px;\n min-width: 75px;\n height: 75px;\n min-height: 75px;\n position: relative;\n overflow: hidden;\n .spw-card-image {\n height: 100%;\n ::slotted(img) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100% !important;\n object-fit: cover;\n object-position: center;\n }\n }\n}\n\n:host(.--video) {\n width: 100%;\n height: 100%;\n position: absolute;\n overflow: hidden;\n top: 0;\n left: 0;\n &:after {\n content: '';\n background: black;\n opacity: 0.4;\n transition: all linear 0.2s;\n border-radius: 5px;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n .spw-card-image {\n height: 100%;\n ::slotted(img) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100% !important;\n object-fit: cover;\n object-position: center;\n }\n }\n}\n\n:host(.--video.--hovered) {\n &:after {\n opacity: 0.6;\n }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'spw-card-image',\n styleUrl: 'spw-card-image.scss',\n shadow: true,\n})\nexport class SpwCardImage {\n @Element() el: HTMLSpwCardImageElement;\n /** Label spécifié dans la carte */\n @Prop() label?: string;\n\n componentDidLoad() {\n const card = this.el.closest('spw-card');\n if (card) {\n card.addEventListener('mouseenter', () => this.onCardHover(true));\n card.addEventListener('mouseleave', () => this.onCardHover(false));\n }\n }\n\n private onCardHover(hovered) {\n const icon = this.el.shadowRoot.querySelector('.spw-card-image');\n if (icon) {\n if (hovered) {\n icon.classList.add('--is-hovered');\n } else {\n icon.classList.remove('--is-hovered');\n }\n }\n }\n\n render() {\n return (\n <div class=\"spw-card-image\">\n {this.label && <span class=\"spw-card-image__label\">{this.label}</span>}\n <slot></slot>\n <div class=\"spw-card-image__icon\">\n <spw-icon icon=\"fa-plus\"></spw-icon>\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,~~k0KAAk0K~~;;~~MCO70K~~,YAAY,GAAA,MAAA;;;;IAKvB,gBAAgB,GAAA;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;QACxC,IAAI,IAAI,EAAE;AACR,YAAA,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AACjE,YAAA,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;;;AAI9D,IAAA,WAAW,CAAC,OAAO,EAAA;AACzB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC;QAChE,IAAI,IAAI,EAAE;YACR,IAAI,OAAO,EAAE;AACX,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC;;iBAC7B;AACL,gBAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC;;;;IAK3C,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,IAAI,CAAC,KAAK,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,EACtE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,SAAS,GAAY,CAChC,CACF;;;;;;;;"}
1	+ {"version":3,"file":"spw-card-image.entry.esm.js","sources":["src/components/spw-card/spw-card-image/spw-card-image.scss?tag=spw-card-image&encapsulation=shadow","src/components/spw-card/spw-card-image/spw-card-image.tsx"],"sourcesContent":["@import '../../../scss/mixins';\n\n:host {\n width: 100%;\n line-height: 1;\n --spw-card-image-display: block;\n}\n\n:host(.--people) {\n width: 112px;\n max-width: 112px;\n}\n\n.spw-card-image {\n position: relative;\n overflow: hidden;\n border-radius: 5px 5px 0 0;\n display: var(--spw-card-image-display);\n\n :host(.--vertical) &,\n :host(.--event) & {\n border-radius: 5px 0 0 5px;\n }\n\n :host(.--people) & {\n border-radius: 5px;\n }\n\n :host(.--video) &,\n :host(.--sidebar) & {\n border-radius: 5px;\n }\n\n ::slotted(img),\n img {\n width: 100%;\n height: auto;\n transition: all 0.3s ease;\n transform-origin: center center;\n }\n\n &__icon {\n &:before {\n @include blanket;\n background: var(--spw-ds-primary);\n opacity: 0.4;\n }\n position: absolute;\n z-index: 2;\n display: flex;\n visibility: hidden;\n width: 100%;\n height: 100%;\n font-size: 30px;\n font-weight: 300;\n opacity: 0;\n top: 0;\n left: 0;\n color: white;\n justify-content: center;\n align-items: center;\n transition: all 0.3s ease;\n\n spw-icon {\n transform: scale(1.5);\n transition: all 0.3s ease;\n }\n }\n\n &__label {\n position: absolute;\n top: 10px;\n right: 10px;\n display: inline-flex;\n padding: 8px 12px;\n align-items: center;\n border-radius: 9999px;\n color: var(--spw-color-themes-grey-grey-900);\n box-shadow: var(--spw-effect-elevation-3);\n font-size: 14px;\n background: var(--spw-ds-white);\n z-index: 3;\n line-height: 1;\n }\n}\n\n:host(.--hovered:not(.--video)) {\n .spw-card-image,\n .spw-card-image.--is-hovered {\n .spw-card-image__icon {\n visibility: visible;\n opacity: 1;\n spw-icon {\n transform: scale(1);\n }\n }\n ::slotted(img) {\n transform: scale(1.1);\n }\n }\n}\n\n:host(.--vertical),\n:host(.--event) {\n width: 170px;\n min-width: 170px;\n position: relative;\n overflow: hidden;\n .spw-card-image {\n height: 100%;\n ::slotted(img) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100% !important;\n object-fit: cover;\n object-position: center;\n }\n }\n}\n\n:host(.--sidebar) {\n width: 75px;\n min-width: 75px;\n height: 75px;\n min-height: 75px;\n position: relative;\n overflow: hidden;\n .spw-card-image {\n height: 100%;\n ::slotted(img) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100% !important;\n object-fit: cover;\n object-position: center;\n }\n }\n}\n\n:host(.--video) {\n width: 100%;\n height: 100%;\n position: absolute;\n overflow: hidden;\n top: 0;\n left: 0;\n &:after {\n content: '';\n background: black;\n opacity: 0.4;\n transition: all linear 0.2s;\n border-radius: 5px;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n .spw-card-image {\n height: 100%;\n ::slotted(img) {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100% !important;\n object-fit: cover;\n object-position: center;\n }\n }\n}\n\n:host(.--video.--hovered) {\n &:after {\n opacity: 0.6;\n }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n@Component({\n tag: 'spw-card-image',\n styleUrl: 'spw-card-image.scss',\n shadow: true,\n})\nexport class SpwCardImage {\n @Element() el: HTMLSpwCardImageElement;\n /** Label spécifié dans la carte */\n @Prop() label?: string;\n\n componentDidLoad() {\n const card = this.el.closest('spw-card');\n if (card) {\n card.addEventListener('mouseenter', () => this.onCardHover(true));\n card.addEventListener('mouseleave', () => this.onCardHover(false));\n }\n }\n\n private onCardHover(hovered) {\n const icon = this.el.shadowRoot.querySelector('.spw-card-image');\n if (icon) {\n if (hovered) {\n icon.classList.add('--is-hovered');\n } else {\n icon.classList.remove('--is-hovered');\n }\n }\n }\n\n render() {\n return (\n <div class=\"spw-card-image\">\n {this.label && <span class=\"spw-card-image__label\">{this.label}</span>}\n <slot></slot>\n <div class=\"spw-card-image__icon\">\n <spw-icon icon=\"fa-plus\"></spw-icon>\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,wjLAAwjL;;MCOnkL,YAAY,GAAA,MAAA;;;;IAKvB,gBAAgB,GAAA;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;QACxC,IAAI,IAAI,EAAE;AACR,YAAA,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AACjE,YAAA,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;;;AAI9D,IAAA,WAAW,CAAC,OAAO,EAAA;AACzB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC;QAChE,IAAI,IAAI,EAAE;YACR,IAAI,OAAO,EAAE;AACX,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC;;iBAC7B;AACL,gBAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC;;;;IAK3C,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,IAAI,CAAC,KAAK,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,EACtE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,SAAS,GAAY,CAChC,CACF;;;;;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-card-title.entry.esm.js","sources":["src/components/spw-card/spw-card-title/spw-card-title.scss?tag=spw-card-title&encapsulation=shadow","src/components/spw-card/spw-card-title/spw-card-title.tsx"],"sourcesContent":[".spw-card-title {\n line-height: 1.3;\n font-weight: 700;\n font-size: 20px;\n transition: all 0.3s ease;\n color: var(--spw-color-themes-grey-grey-900);\n :host(.--hovered:not(.--video)) & {\n color: var(--spw-ds-primary);\n }\n :host(.--video) & {\n color: white;\n }\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-card-title',\n styleUrl: 'spw-card-title.scss',\n shadow: true,\n})\nexport class SpwCardTitle {\n render() {\n return (\n <h3 class=\"spw-card-title\">\n <slot></slot>\n </h3>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,~~wzFAAwzF~~;;~~MCOn0F~~,YAAY,GAAA,MAAA~~;;;;IACvB~~,MAAM,GAAA;~~QACJ~~,QACE,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAI~~,KAAK,EAAC,gBAAgB,EAAA,EACxB,~~CAAa~~,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,~~CACV~~;;;;;;;"}
1	+ {"version":3,"file":"spw-card-title.entry.esm.js","sources":["src/components/spw-card/spw-card-title/spw-card-title.scss?tag=spw-card-title&encapsulation=shadow","src/components/spw-card/spw-card-title/spw-card-title.tsx"],"sourcesContent":[".spw-card-title {\n line-height: 1.3;\n font-weight: 700;\n font-size: 20px;\n transition: all 0.3s ease;\n color: var(--spw-color-themes-grey-grey-900);\n :host(.--hovered:not(.--video):not(.--people)) & {\n color: var(--spw-ds-primary);\n }\n :host(.--video) & {\n color: white;\n }\n :host(.--sidebar) & {\n font-size: 18px;\n line-height: 1.2;\n }\n :host(.--people) & {\n padding: 0 24px;\n border-bottom: 1px solid var(--spw-color-themes-grey-grey-300);\n }\n &__text {\n :host(.--people) & {\n display: inline-block;\n padding: 18px 0;\n border-bottom: 4px solid var(--spw-card-title-border-color, var(--spw-ds-primary));\n }\n }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-card-title',\n styleUrl: 'spw-card-title.scss',\n shadow: true,\n})\nexport class SpwCardTitle {\n /** Code hexadécimal de la bordure sous le titre (à appliquer sur spw-card-title si la variante de la carte est \"people\") */\n @Prop() borderColor?: string = '';\n\n render() {\n return (\n <Host style={{ '--spw-card-title-border-color': this.borderColor }}>\n <h3 class=\"spw-card-title\">\n <span class=\"spw-card-title__text\">\n <slot></slot>\n </span>\n </h3>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,kpGAAkpG;;MCO7pG,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAW,CAAA,WAAA,GAAY,EAAE;AAalC;IAXC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,EAAE,+BAA+B,EAAE,IAAI,CAAC,WAAW,EAAE,EAAA,EAChE,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACxB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACJ,CACA;;;;;;;"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-card.entry.esm.js","sources":["src/components/spw-card/spw-card.scss?tag=spw-card&encapsulation=shadow","src/components/spw-card/spw-card.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n &[data-modal-trigger] {\n cursor: pointer;\n }\n}\n\n:host(.--is-full-height) {\n height: 100%;\n}\n\n.spw-card {\n display: block;\n border-radius: 5px;\n background: var(--spw-ds-white);\n box-shadow: var(--spw-effect-elevation-2);\n transition: all 0.3s ease-in-out;\n\n :host(.--is-full-height) & {\n height: 100%;\n }\n\n &--hoverable:hover {\n box-shadow: var(--spw-effect-elevation-4);\n transform: translateY(-5px);\n }\n\n &__dates {\n cursor: pointer;\n position: absolute;\n top: 50%;\n left: 0;\n transform: translate(-50%, -50%);\n flex-direction: column;\n line-height: 1.1;\n width: 80px;\n height: 80px;\n text-align: center;\n color: white;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--spw-ds-primary);\n border-radius: 50%;\n font-size: 18px;\n text-decoration: none;\n }\n &__date-item {\n span:first-of-type {\n font-weight: bold;\n }\n }\n}\n\n.spw-card__link {\n display: block;\n height: 100%;\n width: 100%;\n color: inherit;\n text-decoration: none;\n\n .spw-card--no-image & {\n padding-top: 15px;\n }\n\n &:focus-visible {\n outline: 3px solid white;\n outline-offset: -1px;\n box-shadow: 0 0 0 5px black;\n border-radius: 5px;\n }\n}\n\n.spw-card--vertical,\n.spw-card--video {\n .spw-card__link {\n display: flex;\n min-height: 240px;\n }\n}\n\n.spw-card--sidebar {\n box-shadow: none;\n &:hover {\n box-shadow: none;\n }\n .spw-card__link {\n display: flex;\n gap: 16px;\n }\n}\n\n.spw-card--event {\n position: relative;\n width: calc(100% - 40px);\n left: 40px;\n}\n","import { Element, Listen, State, Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-card',\n styleUrl: 'spw-card.scss',\n shadow: true,\n})\nexport class SpwCard {\n @Element() el: HTMLSpwCardElement;\n @State() hasImage: boolean = false;\n\n /** Type de variante de carte /\n @Prop() variant?: 'news' \| 'vertical' \| 'video' \| 'event' \| 'sidebar' = 'news';\n /* Type d'élément du bouton /\n @Prop() elementType: string = 'a';\n /* Spécifie le lien si nécessaire /\n @Prop() href?: string;\n /* Attribut target, s'applique uniquement si href est rempli /\n @Prop() target: string = '_self';\n /* Remplit l'attribut rel /\n @Prop() rel?: string;\n /* Définir une date de début si la carte est un évènement /\n @Prop() dateStart?: string;\n /* Définir une date de fin si la carte est un évènement /\n @Prop() dateEnd?: string;\n\n /* Si vrai, les cartes ont la même hauteur /\n @Prop() fullHeight: boolean = false;\n /* Si désactivée, la carte n'est pas utilisable /\n @Prop() disabled: boolean = false;\n /* Remplit l'attribut aria-label, utilisé à des fins d'accessibilité */\n @Prop() accAriaLabel?: string;\n\n componentWillLoad() {\n this.checkForImage();\n this.applyVariantToChildren();\n }\n\n @Listen('slotchange')\n slotChanged() {\n this.checkForImage();\n this.applyVariantToChildren();\n }\n\n @Listen('mouseenter')\n onMouseEnter() {\n this.setImageHovered(true);\n }\n\n @Listen('mouseleave')\n onMouseLeave() {\n this.setImageHovered(false);\n }\n\n private checkForImage() {\n requestAnimationFrame(() => {\n const imageElement = this.el.querySelector('spw-card-image');\n const contentElement = this.el.querySelector('spw-card-content');\n this.hasImage = !!imageElement;\n if (!this.hasImage) {\n contentElement.classList.add('--no-image');\n }\n });\n }\n\n private formatDate(date?: string): any[] {\n if (!date) return [];\n const parts = date.split('/');\n return parts.flatMap((part, index) => (index < parts.length - 1 ? [<span>{part}</span>, <span>/</span>] : [<span>{part}</span>]));\n }\n\n private applyVariantToChildren() {\n requestAnimationFrame(() => {\n const variantClass = `--${this.variant}`;\n const contentElement = this.el.querySelector('spw-card-content');\n const imageElement = this.el.querySelector('spw-card-image');\n const titleElement = this.el.querySelector('spw-card-title');\n const excerptElement = this.el.querySelector('spw-card-excerpt');\n const subtagsElement = this.el.querySelector('spw-card-subtags');\n\n contentElement && contentElement.classList.add(variantClass);\n imageElement && imageElement.classList.add(variantClass);\n titleElement && titleElement.classList.add(variantClass);\n excerptElement && excerptElement.classList.add(variantClass);\n subtagsElement && subtagsElement.classList.add(variantClass);\n });\n }\n\n private setImageHovered(isHovered: boolean) {\n const imageElement = this.el.querySelector('spw-card-image');\n const titleElement = this.el.querySelector('spw-card-title');\n if (imageElement && this.href) {\n imageElement.classList.toggle('--hovered', isHovered);\n }\n if (titleElement && this.href) {\n titleElement.classList.toggle('--hovered', isHovered);\n }\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-card': true,\n 'spw-card--hoverable': !!this.href,\n 'spw-card--no-image': !this.hasImage,\n [`spw-card--${this.variant}`]: true,\n };\n }\n\n render() {\n const { href, rel, target, dateStart, dateEnd, variant } = this;\n const TagType = this.href === undefined ? 'div' : 'a';\n const attrs =\n TagType === 'div'\n ? {}\n : {\n href,\n rel,\n target,\n };\n\n const ariaAttributes = {\n 'aria-label': this?.accAriaLabel,\n 'aria-disabled': this.disabled ? 'true' : null,\n };\n\n return (\n <Host class={{ '--is-full-height': this.fullHeight }}>\n <article class={this.elementClass}>\n {variant === 'event' && (\n <TagType {...attrs} class=\"spw-card__dates\">\n {dateStart && <div class=\"spw-card__date-item\">{this.formatDate(dateStart)}</div>}\n {dateEnd && <div class=\"spw-card__date-item\">{this.formatDate(dateEnd)}</div>}\n </TagType>\n )}\n <TagType {...attrs} {...ariaAttributes} class=\"spw-card__link\">\n <slot></slot>\n </TagType>\n </article>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,43HAA43H;;MCOl4H,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOW,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAG1B,QAAA,IAAO,CAAA,OAAA,GAAyD,MAAM;;AAEtE,QAAA,IAAW,CAAA,WAAA,GAAW,GAAG;;AAIzB,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;;AASxB,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;;AAE3B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAgHlC;IA5GC,iBAAiB,GAAA;QACf,IAAI,CAAC,aAAa,EAAE;QACpB,IAAI,CAAC,sBAAsB,EAAE;;IAI/B,WAAW,GAAA;QACT,IAAI,CAAC,aAAa,EAAE;QACpB,IAAI,CAAC,sBAAsB,EAAE;;IAI/B,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;;IAI5B,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;;IAGrB,aAAa,GAAA;QACnB,qBAAqB,CAAC,MAAK;YACzB,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;YAC5D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC;AAChE,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,YAAY;AAC9B,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,gBAAA,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;;AAE9C,SAAC,CAAC;;AAGI,IAAA,UAAU,CAAC,IAAa,EAAA;AAC9B,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,EAAE;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;QAC7B,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAQ,EAAE,oBAAc,CAAC,GAAG,CAAC,CAAO,CAAA,MAAA,EAAA,IAAA,EAAA,IAAI,CAAQ,CAAC,CAAC,CAAC;;IAG3H,sBAAsB,GAAA;QAC5B,qBAAqB,CAAC,MAAK;AACzB,YAAA,MAAM,YAAY,GAAG,CAAA,EAAA,EAAK,IAAI,CAAC,OAAO,EAAE;YACxC,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC;YAChE,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;YAC5D,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;YAC5D,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC;YAChE,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC;YAEhE,cAAc,IAAI,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;YAC5D,YAAY,IAAI,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;YACxD,YAAY,IAAI,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;YACxD,cAAc,IAAI,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;YAC5D,cAAc,IAAI,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;AAC9D,SAAC,CAAC;;AAGI,IAAA,eAAe,CAAC,SAAkB,EAAA;QACxC,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;QAC5D,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;AAC5D,QAAA,IAAI,YAAY,IAAI,IAAI,CAAC,IAAI,EAAE;YAC7B,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC;;AAEvD,QAAA,IAAI,YAAY,IAAI,IAAI,CAAC,IAAI,EAAE;YAC7B,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC;;;AAIzD,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO;AACL,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,qBAAqB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;AAClC,YAAA,oBAAoB,EAAE,CAAC,IAAI,CAAC,QAAQ;AACpC,YAAA,CAAC,aAAa,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;SACpC;;IAGH,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI;AAC/D,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,KAAK,GAAG,GAAG;AACrD,QAAA,MAAM,KAAK,GACT,OAAO,KAAK;AACV,cAAE;AACF,cAAE;gBACE,IAAI;gBACJ,GAAG;gBACH,MAAM;aACP;AAEP,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,YAAY,EAAE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,YAAY;YAChC,eAAe,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI;SAC/C;AAED,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,CAAC,UAAU,EAAE,EAAA,EAClD,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,YAAY,EAAA,EAC9B,OAAO,KAAK,OAAO,KAClB,CAAA,CAAC,OAAO,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,KAAK,EAAC,iBAAiB,EAAA,CAAA,EACxC,SAAS,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAAE,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAO,EAChF,OAAO,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAE,EAAA,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAO,CACrE,CACX,EACD,CAAC,CAAA,OAAO,qEAAK,KAAK,EAAM,cAAc,EAAE,EAAA,KAAK,EAAC,gBAAgB,EAAA,CAAA,EAC5D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACL,CACF,CACL;;;;;;;;"}
1	+ {"version":3,"file":"spw-card.entry.esm.js","sources":["src/components/spw-card/spw-card.scss?tag=spw-card&encapsulation=shadow","src/components/spw-card/spw-card.tsx"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n --spw-card-background: var(--spw-ds-white);\n --spw-card-box-shadow: var(--spw-effect-elevation-6);\n --spw-card-border: none;\n &[data-modal-trigger] {\n cursor: pointer;\n }\n}\n\n:host(.--is-full-height) {\n height: 100%;\n}\n\n.spw-card {\n display: block;\n border-radius: 5px;\n background: var(--spw-card-background);\n box-shadow: var(--spw-card-box-shadow);\n border: var(--spw-card-border);\n transition: all 0.3s ease-in-out;\n\n :host(.--is-full-height) & {\n height: 100%;\n }\n\n &--hoverable:hover {\n box-shadow: var(--spw-effect-elevation-4);\n transform: translateY(-5px);\n }\n\n &__dates {\n cursor: pointer;\n position: absolute;\n top: 50%;\n left: 0;\n transform: translate(-50%, -50%);\n flex-direction: column;\n line-height: 1.1;\n width: 80px;\n height: 80px;\n text-align: center;\n color: white;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--spw-ds-primary);\n border-radius: 50%;\n font-size: 18px;\n text-decoration: none;\n z-index: 2;\n }\n &__date-item {\n span:first-of-type {\n font-weight: bold;\n }\n }\n}\n\n.spw-card__link {\n display: block;\n height: 100%;\n width: 100%;\n color: inherit;\n text-decoration: none;\n\n .spw-card--no-image & {\n padding-top: 15px;\n }\n\n &:focus-visible {\n outline: 3px solid white;\n outline-offset: -1px;\n box-shadow: 0 0 0 5px black;\n border-radius: 5px;\n }\n}\n\n.spw-card--vertical,\n.spw-card--video {\n .spw-card__link {\n display: flex;\n min-height: 240px;\n }\n}\n\n.spw-card--event {\n .spw-card__link {\n display: flex;\n }\n}\n\n.spw-card--sidebar {\n box-shadow: none;\n &:hover {\n box-shadow: none;\n }\n .spw-card__link {\n display: flex;\n gap: 16px;\n }\n}\n\n.spw-card--event {\n position: relative;\n width: calc(100% - 40px);\n left: 40px;\n}\n","import { Element, Listen, State, Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-card',\n styleUrl: 'spw-card.scss',\n shadow: true,\n})\nexport class SpwCard {\n @Element() el: HTMLSpwCardElement;\n @State() hasImage: boolean = false;\n private childHoveredCount = 0; // <-- Ajouté : pour suivre le nombre de sous-cartes survolées\n\n /** Type de variante de carte /\n @Prop() variant?: 'news' \| 'vertical' \| 'video' \| 'event' \| 'sidebar' \| 'people' = 'news';\n /* Type d'élément du bouton /\n @Prop() elementType: string = 'a';\n /* Spécifie le lien si nécessaire /\n @Prop() href?: string;\n /* Attribut target, s'applique uniquement si href est rempli /\n @Prop() target: string = '_self';\n /* Remplit l'attribut rel /\n @Prop() rel?: string;\n /* Définir une date de début si la carte est un évènement /\n @Prop() dateStart?: string;\n /* Définir une date de fin si la carte est un évènement /\n @Prop() dateEnd?: string;\n\n /* Si vrai, les cartes ont la même hauteur /\n @Prop() fullHeight: boolean = false;\n /* Si désactivée, la carte n'est pas utilisable /\n @Prop() disabled: boolean = false;\n /* Remplit l'attribut aria-label, utilisé à des fins d'accessibilité */\n @Prop() accAriaLabel?: string;\n\n componentWillLoad() {\n this.checkForImage();\n this.applyVariantToChildren();\n this.attachNestedCardListeners();\n }\n\n @Listen('slotchange')\n slotChanged() {\n this.checkForImage();\n this.applyVariantToChildren();\n this.attachNestedCardListeners();\n }\n\n @Listen('mouseenter')\n onMouseEnter() {\n if (this.childHoveredCount === 0) {\n this.setImageHovered(true);\n }\n }\n\n @Listen('mouseleave')\n onMouseLeave() {\n this.setImageHovered(false);\n }\n\n private attachNestedCardListeners() {\n requestAnimationFrame(() => {\n const nestedCards = this.el.querySelectorAll('spw-card');\n\n nestedCards.forEach(card => {\n card.addEventListener('mouseenter', this.onNestedCardEnter.bind(this), true);\n card.addEventListener('mouseleave', this.onNestedCardLeave.bind(this), true);\n });\n });\n }\n\n private onNestedCardEnter = () => {\n this.childHoveredCount++;\n this.setImageHovered(false);\n };\n\n private onNestedCardLeave = () => {\n this.childHoveredCount = Math.max(0, this.childHoveredCount - 1);\n if (this.childHoveredCount === 0 && this.isPointerInside(this.el)) {\n this.setImageHovered(true);\n }\n };\n\n private isPointerInside(element: HTMLElement): boolean {\n const rect = element.getBoundingClientRect();\n const { left, top, right, bottom } = rect;\n const { clientX, clientY } = window as any;\n return clientX >= left && clientX <= right && clientY >= top && clientY <= bottom;\n }\n\n private checkForImage() {\n requestAnimationFrame(() => {\n const imageElement = this.el.querySelector('spw-card-image');\n const contentElement = this.el.querySelector('spw-card-content');\n this.hasImage = !!imageElement;\n if (!this.hasImage) {\n contentElement?.classList.add('--no-image');\n }\n });\n }\n\n private formatDate(date?: string): any[] {\n if (!date) return [];\n const parts = date.split('/');\n return parts.flatMap((part, index) => (index < parts.length - 1 ? [<span>{part}</span>, <span>/</span>] : [<span>{part}</span>]));\n }\n\n private applyVariantToChildren() {\n requestAnimationFrame(() => {\n const variantClass = `--${this.variant}`;\n const contentElement = this.el.querySelector('spw-card-content');\n const imageElement = this.el.querySelector('spw-card-image');\n const titleElement = this.el.querySelector('spw-card-title');\n const excerptElement = this.el.querySelector('spw-card-excerpt');\n const subtagsElement = this.el.querySelector('spw-card-subtags');\n\n contentElement?.classList.add(variantClass);\n imageElement?.classList.add(variantClass);\n titleElement?.classList.add(variantClass);\n excerptElement?.classList.add(variantClass);\n subtagsElement?.classList.add(variantClass);\n });\n }\n\n private setImageHovered(isHovered: boolean) {\n const imageElement = this.el.querySelector('spw-card-image');\n const titleElement = this.el.querySelector('spw-card-title');\n if (imageElement && this.href) {\n imageElement.classList.toggle('--hovered', isHovered);\n }\n if (titleElement && this.href) {\n titleElement.classList.toggle('--hovered', isHovered);\n }\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-card': true,\n 'spw-card--hoverable': !!this.href,\n 'spw-card--no-image': !this.hasImage,\n [`spw-card--${this.variant}`]: true,\n };\n }\n\n render() {\n const { href, rel, target, dateStart, dateEnd, variant } = this;\n const TagType = this.href === undefined ? 'div' : 'a';\n const attrs =\n TagType === 'div'\n ? {}\n : {\n href,\n rel,\n target,\n };\n\n const ariaAttributes = {\n 'aria-label': this?.accAriaLabel,\n 'aria-disabled': this.disabled ? 'true' : null,\n };\n\n return (\n <Host class={{ '--is-full-height': this.fullHeight }}>\n <article class={this.elementClass}>\n {variant === 'event' && (\n <TagType {...attrs} class=\"spw-card__dates\">\n {dateStart && <div class=\"spw-card__date-item\">{this.formatDate(dateStart)}</div>}\n {dateEnd && <div class=\"spw-card__date-item\">{this.formatDate(dateEnd)}</div>}\n </TagType>\n )}\n <TagType {...attrs} {...ariaAttributes} class=\"spw-card__link\">\n <slot></slot>\n </TagType>\n </article>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-checkbox.entry.esm.js","sources":["src/components/spw-checkbox/spw-checkbox.scss?tag=spw-checkbox&encapsulation=shadow","src/components/spw-checkbox/spw-checkbox.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n vertical-align: top;\n --spw-ds-checkbox-checked-color: var(--spw-ds-primary);\n}\n\n.spw-checkbox {\n display: inline-flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 0;\n\n &__wrapper {\n display: flex;\n position: relative;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background-color: var(--spw-ds-white);\n border: 2px solid var(--spw-color-themes-grey-grey-900);\n border-radius: var(--spw-spacings-border-radius-2-xs);\n font-size: var(--spw-typography-body-body-3-font-size);\n flex: none;\n order: 0;\n flex-grow: 0;\n\n spw-icon {\n font-size: 14px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n &--error {\n border-color: var(--spw-colors-dark-states-error-error-300);\n }\n\n &:not(.spw-checkbox__wrapper--disabled):hover {\n outline: 4px solid var(--spw-color-themes-grey-grey-300);\n }\n\n &:not(.spw-checkbox__wrapper--disabled):focus-visible,\n &:not(.spw-checkbox__wrapper--disabled):active,\n &:not(.spw-checkbox__wrapper--disabled):focus-within,\n &:not(.spw-checkbox__wrapper--disabled):active {\n outline: 2px solid white;\n outline-offset: 0;\n box-shadow: 0 0 0 4px black;\n }\n\n &--disabled {\n border-color: var(--spw-color-themes-grey-grey-500);\n }\n\n &--checked {\n border-color: var(--spw-ds-checkbox-checked-color);\n color: var(--spw-ds-checkbox-checked-color);\n\n &--disabled {\n color: var(--spw-color-themes-grey-grey-500);\n }\n }\n\n &--toggle {\n width: 32px;\n height: 20px;\n border-radius: 40px;\n border-color: var(--spw-color-themes-grey-grey-500);\n background: var(--spw-color-themes-grey-grey-500);\n // transition: border-color 0.2s ease;\n spw-icon {\n opacity: 0;\n line-height: 0;\n transition: all 0.2s 0.3s ease;\n }\n &:before {\n content: '';\n position: absolute;\n width: 14px;\n height: 14px;\n background: white;\n border-radius: 50%;\n top: 50%;\n left: 2px;\n transform: translateY(-50%);\n transition: all 0.2s ease;\n }\n }\n &.spw-checkbox__wrapper--checked.spw-checkbox__wrapper--toggle {\n border-color: var(--spw-ds-checkbox-checked-color);\n background: var(--spw-ds-checkbox-checked-color);\n &:before {\n left: calc(100% - 16px);\n background: white;\n }\n spw-icon {\n display: block;\n color: var(--spw-ds-checkbox-checked-color);\n font-size: 10px;\n margin-left: 5px;\n // opacity: 1;\n }\n }\n &.spw-checkbox__wrapper--toggle.spw-checkbox__wrapper--disabled {\n border-color: var(--spw-color-themes-grey-grey-500);\n background: white;\n &:before {\n background: var(--spw-color-themes-grey-grey-500);\n }\n }\n }\n\n &__label {\n color: var(--spw-color-themes-grey-grey-900);\n word-wrap: break-word;\n order: 1;\n padding-top: 1px;\n user-select: none;\n padding-left: var(--spw-spacings-spacing-sm);\n\n &:hover ~ .spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled) {\n outline: 4px solid var(--spw-color-themes-grey-grey-300);\n }\n\n &:active ~ .spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled) {\n outline: 2px solid white;\n outline-offset: 0;\n box-shadow: 0 0 0 4px black;\n }\n\n &--disabled {\n color: var(--spw-color-themes-grey-grey-500);\n }\n }\n\n &__wrapper,\n &__label {\n &:hover {\n cursor: pointer;\n }\n &--disabled:hover {\n cursor: not-allowed;\n }\n }\n}\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n\n@Component({\n tag: 'spw-checkbox',\n styleUrl: 'spw-checkbox.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class SpwCheckbox {\n private inputElement: HTMLInputElement;\n\n @Element() el: HTMLSpwCheckboxElement;\n\n /** Détermine si la case à cocher est désactivée, rendant l'élément inutilisable /\n @Prop() disabled: boolean = false;\n /* Propriété mutable qui reflète si la case à cocher est cochée ou non /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n /* Indique s'il y a une erreur associée à la case à cocher, pour un affichage visuel /\n @Prop() error: boolean = false;\n /* Icône à afficher lorsque la case à cocher est cochée /\n @Prop() icon: string = 'fa-check';\n /* Nom de l'élément utilisé dans les formulaires /\n @Prop() name: string;\n /* Type de variant pour la checkbox /\n @Prop() variant?: 'default' \| 'toggle' = 'default';\n\n @State() internalChecked: boolean;\n\n @AttachInternals() internals: ElementInternals;\n\n /* Événement déclenché lors d'un changement d'état de la case à cocher (cochée ou décochée) /\n @Event({ bubbles: true, composed: true }) spwChange: EventEmitter<boolean>;\n\n private handleCheckbox() {\n if (!this.disabled) {\n this.internalChecked = !this.internalChecked;\n this.checked = this.internalChecked;\n this.updateFormValue();\n this.spwChange.emit(this.internalChecked);\n }\n }\n\n /* Méthode publique pour changer l'état de la case à cocher. */\n @Method()\n async toggleCheckedState(newVal: boolean) {\n this.internalChecked = newVal;\n this.checked = newVal;\n this.updateFormValue();\n }\n\n @Watch('checked')\n checkedChanged(newChecked: boolean) {\n this.internalChecked = newChecked;\n this.inputElement.checked = newChecked;\n this.updateFormValue();\n }\n\n private updateFormValue() {\n if (this.internalChecked) {\n this.internals.setFormValue('on');\n } else {\n this.internals.setFormValue(null);\n }\n }\n\n private handleKeydown(event) {\n if (event.key === ' ' \|\| event.key === 'Enter') {\n // Space or Enter keys\n this.handleCheckbox();\n event.preventDefault();\n }\n }\n\n componentWillLoad() {\n this.internalChecked = this.checked;\n this.updateFormValue();\n }\n\n componentDidLoad() {\n this.el.closest('form')?.addEventListener('formdata', (e: FormDataEvent) => {\n if (this.internalChecked) {\n e.formData.set(this.name, 'on');\n }\n });\n }\n\n formResetCallback() {\n this.internalChecked = false;\n this.checked = false;\n this.updateFormValue();\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-checkbox__wrapper': true,\n [`spw-checkbox__wrapper--${this.variant}`]: true,\n 'spw-checkbox__wrapper--disabled': this.disabled,\n 'spw-checkbox__wrapper--checked': this.internalChecked,\n 'spw-checkbox__wrapper--error': this.error,\n };\n }\n\n render() {\n const slot = this.el.innerHTML;\n const hasSlot = Boolean(slot);\n\n return (\n <div class=\"spw-checkbox\">\n <input\n type=\"checkbox\"\n ref={el => (this.inputElement = el)}\n checked={this.internalChecked}\n onChange={this.handleCheckbox.bind(this)}\n name={this.name}\n disabled={this.disabled}\n style={{ display: 'none' }}\n />\n {hasSlot && (\n <label htmlFor={this.name} class={`spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`} onClick={this.handleCheckbox.bind(this)}>\n <slot />\n </label>\n )}\n <div\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleCheckbox.bind(this)}\n onKeyDown={this.handleKeydown.bind(this)}\n role=\"checkbox\"\n aria-checked={this.internalChecked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-labelledby=\"label\"\n class={this.elementClass}\n >\n {this.internalChecked && <spw-icon icon={this.icon}></spw-icon>}\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"spw-checkbox.entry.esm.js","sources":["src/components/spw-checkbox/spw-checkbox.scss?tag=spw-checkbox&encapsulation=shadow","src/components/spw-checkbox/spw-checkbox.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n vertical-align: top;\n --spw-ds-checkbox-checked-color: var(--spw-ds-primary);\n --spw-ds-checkbox-checked-active-color: var(--spw-ds-active);\n --spw-ds-checkbox-checked-hover-color: var(--spw-ds-variant);\n}\n\n.spw-checkbox {\n display: inline-flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 0;\n\n &__wrapper {\n display: flex;\n position: relative;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background-color: var(--spw-ds-white);\n border: 2px solid var(--spw-color-themes-grey-grey-900);\n border-radius: var(--spw-spacings-border-radius-2-xs);\n font-size: var(--spw-typography-body-body-3-font-size);\n flex: none;\n order: 0;\n flex-grow: 0;\n\n spw-icon {\n font-size: 14px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n &--error {\n border-color: var(--spw-colors-dark-states-error-error-300);\n }\n\n &:not(.spw-checkbox__wrapper--disabled):hover {\n outline: 4px solid var(--spw-color-themes-grey-grey-300);\n }\n\n &:not(.spw-checkbox__wrapper--disabled):focus-visible,\n &:not(.spw-checkbox__wrapper--disabled):active,\n &:not(.spw-checkbox__wrapper--disabled):focus-within,\n &:not(.spw-checkbox__wrapper--disabled):active {\n outline: 2px solid white;\n outline-offset: 0;\n box-shadow: 0 0 0 4px black;\n }\n\n &--disabled {\n border-color: var(--spw-color-themes-grey-grey-500);\n }\n\n &--checked {\n border-color: var(--spw-ds-checkbox-checked-color);\n color: var(--spw-ds-checkbox-checked-color);\n\n &--disabled {\n color: var(--spw-color-themes-grey-grey-500);\n }\n }\n\n &--toggle {\n top: 1px;\n width: 30px;\n height: 18px;\n border-radius: 40px;\n border: none;\n background: var(--spw-color-themes-grey-grey-500);\n transition: background 0.2s ease;\n &:hover {\n background: var(--spw-color-themes-grey-grey-600);\n }\n &:active {\n background: var(--spw-color-themes-grey-grey-800);\n }\n spw-icon {\n opacity: 0;\n line-height: 0;\n transition: all 0.2s 0.3s ease;\n margin-left: 15px;\n transition: all 0.2s ease;\n }\n &:before {\n content: '';\n position: absolute;\n width: 14px;\n height: 14px;\n background: white;\n border-radius: 50%;\n top: 50%;\n left: 2px;\n transform: translateY(-50%);\n transition: all 0.2s ease;\n }\n }\n &.spw-checkbox__wrapper--checked.spw-checkbox__wrapper--toggle {\n background: var(--spw-ds-checkbox-checked-color);\n color: var(--spw-ds-checkbox-checked-color);\n &:before {\n left: calc(100% - 16px);\n background: white;\n }\n spw-icon {\n font-size: 10px;\n margin-left: 6px;\n opacity: 1;\n }\n &:not(.spw-checkbox__wrapper--disabled):hover {\n background: var(--spw-ds-checkbox-checked-hover-color);\n color: var(--spw-ds-checkbox-checked-hover-color);\n }\n &:not(.spw-checkbox__wrapper--disabled):active {\n background: var(--spw-ds-checkbox-checked-active-color);\n color: var(--spw-ds-checkbox-checked-active-color);\n }\n }\n &.spw-checkbox__wrapper--toggle.spw-checkbox__wrapper--disabled {\n border-color: var(--spw-color-themes-grey-grey-500);\n background: white;\n &:before {\n background: var(--spw-color-themes-grey-grey-500);\n }\n }\n }\n\n &__label {\n color: var(--spw-color-themes-grey-grey-900);\n word-wrap: break-word;\n order: 1;\n padding-top: 1px;\n user-select: none;\n padding-left: var(--spw-spacings-spacing-sm);\n\n &:hover ~ .spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled) {\n outline: 4px solid var(--spw-color-themes-grey-grey-300);\n }\n\n // &:hover ~ .spw-checkbox__wrapper--toggle:not(.spw-checkbox__wrapper--disabled) {\n // background: var(--spw-color-themes-grey-grey-600);\n // color: var(--spw-color-themes-grey-grey-600);\n // }\n\n // &:active ~ .spw-checkbox__wrapper--toggle:not(.spw-checkbox__wrapper--disabled) {\n // background: var(--spw-color-themes-grey-grey-800);\n // color: var(--spw-color-themes-grey-grey-800);\n // }\n\n // &:hover ~ .spw-checkbox__wrapper--toggle.spw-checkbox__wrapper--checked:not(.spw-checkbox__wrapper--disabled) {\n // background: var(--spw-ds-checkbox-checked-hover-color);\n // color: var(--spw-ds-checkbox-checked-hover-color);\n // }\n\n // &:active ~ .spw-checkbox__wrapper--toggle.spw-checkbox__wrapper--checked:not(.spw-checkbox__wrapper--disabled) {\n // background: var(--spw-ds-checkbox-checked-active-color);\n // color: var(--spw-ds-checkbox-checked-active-color);\n // }\n\n &:active ~ .spw-checkbox__wrapper:not(.spw-checkbox__wrapper--disabled) {\n outline: 2px solid white;\n outline-offset: 0;\n box-shadow: 0 0 0 4px black;\n }\n\n &--disabled {\n color: var(--spw-color-themes-grey-grey-500);\n }\n }\n\n &__wrapper,\n &__label {\n &:hover {\n cursor: pointer;\n }\n &--disabled:hover {\n cursor: not-allowed;\n }\n }\n}\n","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n\n@Component({\n tag: 'spw-checkbox',\n styleUrl: 'spw-checkbox.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class SpwCheckbox {\n private inputElement: HTMLInputElement;\n\n @Element() el: HTMLSpwCheckboxElement;\n\n /** Détermine si la case à cocher est désactivée, rendant l'élément inutilisable /\n @Prop() disabled: boolean = false;\n /* Propriété mutable qui reflète si la case à cocher est cochée ou non /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n /* Indique s'il y a une erreur associée à la case à cocher, pour un affichage visuel /\n @Prop() error: boolean = false;\n /* Icône à afficher lorsque la case à cocher est cochée /\n @Prop() icon: string = 'fa-check';\n /* Nom de l'élément utilisé dans les formulaires /\n @Prop() name: string;\n /* Type de variant pour la checkbox /\n @Prop() variant?: 'default' \| 'toggle' = 'default';\n\n @State() internalChecked: boolean;\n\n @AttachInternals() internals: ElementInternals;\n\n /* Événement déclenché lors d'un changement d'état de la case à cocher (cochée ou décochée) /\n @Event({ bubbles: true, composed: true }) spwChange: EventEmitter<boolean>;\n\n private handleCheckbox() {\n if (!this.disabled) {\n this.internalChecked = !this.internalChecked;\n this.checked = this.internalChecked;\n this.updateFormValue();\n this.spwChange.emit(this.internalChecked);\n }\n }\n\n /* Méthode publique pour changer l'état de la case à cocher. */\n @Method()\n async toggleCheckedState(newVal: boolean) {\n this.internalChecked = newVal;\n this.checked = newVal;\n this.updateFormValue();\n }\n\n @Watch('checked')\n checkedChanged(newChecked: boolean) {\n this.internalChecked = newChecked;\n this.inputElement.checked = newChecked;\n this.updateFormValue();\n }\n\n private updateFormValue() {\n if (this.internalChecked) {\n this.internals.setFormValue('on');\n } else {\n this.internals.setFormValue(null);\n }\n }\n\n private handleKeydown(event) {\n if (event.key === ' ' \|\| event.key === 'Enter') {\n // Space or Enter keys\n this.handleCheckbox();\n event.preventDefault();\n }\n }\n\n componentWillLoad() {\n this.internalChecked = this.checked;\n this.updateFormValue();\n }\n\n componentDidLoad() {\n this.el.closest('form')?.addEventListener('formdata', (e: FormDataEvent) => {\n if (this.internalChecked) {\n e.formData.set(this.name, 'on');\n }\n });\n }\n\n formResetCallback() {\n this.internalChecked = false;\n this.checked = false;\n this.updateFormValue();\n }\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-checkbox__wrapper': true,\n [`spw-checkbox__wrapper--${this.variant}`]: true,\n 'spw-checkbox__wrapper--disabled': this.disabled,\n 'spw-checkbox__wrapper--checked': this.internalChecked,\n 'spw-checkbox__wrapper--error': this.error,\n };\n }\n\n render() {\n const slot = this.el.innerHTML;\n const hasSlot = Boolean(slot);\n\n return (\n <div class=\"spw-checkbox\">\n <input\n type=\"checkbox\"\n ref={el => (this.inputElement = el)}\n checked={this.internalChecked}\n onChange={this.handleCheckbox.bind(this)}\n name={this.name}\n disabled={this.disabled}\n style={{ display: 'none' }}\n />\n {hasSlot && (\n <label htmlFor={this.name} class={`spw-checkbox__label ${this.disabled ? 'spw-checkbox__label--disabled' : ''}`} onClick={this.handleCheckbox.bind(this)}>\n <slot />\n </label>\n )}\n <div\n tabindex={this.disabled ? -1 : 0}\n onClick={this.handleCheckbox.bind(this)}\n onKeyDown={this.handleKeydown.bind(this)}\n role=\"checkbox\"\n aria-checked={this.internalChecked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-labelledby=\"label\"\n class={this.elementClass}\n >\n {this.internalChecked && <spw-icon icon={this.icon}></spw-icon>}\n </div>\n </div>\n );\n }\n}\n"],"names":[],"mappings":"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"}

package/dist/spw-stencil-library/spw-field-label.spw-group.spw-icon.spw-link.spw-separator.spw-theme-provider.entry.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-field-label.spw-group.spw-icon.spw-link.spw-separator.spw-theme-provider.entry.esm.js","sources":["src/components/spw-field-label/spw-field-label.scss?tag=spw-field-label&encapsulation=shadow","src/components/spw-field-label/spw-field-label.tsx","src/components/spw-group/spw-group.scss?tag=spw-group","src/components/spw-group/spw-group.tsx","src/components/spw-icon/spw-icon.scss?tag=spw-icon&encapsulation=shadow","src/components/spw-icon/spw-icon.tsx","src/components/spw-link/spw-link.scss?tag=spw-link&encapsulation=shadow","src/components/spw-link/spw-link.tsx","src/components/spw-separator/spw-separator.scss?tag=spw-separator&encapsulation=shadow","src/components/spw-separator/spw-separator.tsx","src/themes/rouge.css","src/themes/bleu.css","src/themes/bleu-clair.css","src/themes/vert.css","src/themes/vert-leger.css","src/themes/turquoise.css","src/themes/orange.css","src/themes/indigo.css","src/themes/mauve.css","src/themes/gris.css","src/themes/themes.ts","src/components/spw-theme-provider/spw-theme-provider.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-field-label {\n color: var(--spw-color-themes-grey-grey-800);\n display: block;\n font-weight: 600;\n @apply spw-tw-mb-2;\n &__required {\n color: var(--spw-ds-primary);\n }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\n\n@Component({\n tag: 'spw-field-label',\n styleUrl: 'spw-field-label.scss',\n shadow: true,\n})\nexport class SpwFieldLabel {\n /** L'attribut id de l'élément input /\n @Prop() name: string;\n /* Texte à afficher au-dessus du champ de saisie /\n @Prop() label?: string = '';\n /* Indique si le champ est requis /\n @Prop() required?: boolean = false;\n\n @Element() el: HTMLSpwFieldLabelElement;\n\n private handleClick = () => {\n const rootNode = this.el.getRootNode() as ShadowRoot \| Document;\n const targetElement = rootNode.getElementById(this.name);\n\n if (targetElement) {\n (targetElement as HTMLElement).focus();\n }\n };\n\n render() {\n return (\n <Host>\n <label class=\"spw-field-label\" htmlFor={this.name} onClick={this.handleClick}>\n {this.label} {this.required && <span class=\"spw-field-label__required\"></span>}\n </label>\n </Host>\n );\n }\n}\n",":host {\n display: block;\n width: 100%;\n}\n\n.spw-group {\n spw-button:not[is-fullwidth-mobile='false'] {\n display: block;\n width: 100%;\n @include breakpoint(md) {\n display: initial;\n width: auto;\n }\n }\n\n &__container {\n display: flex;\n width: fit-content;\n\n .spw-group--is-full-width & {\n width: 100% !important;\n }\n\n @include breakpoint(md) {\n align-items: center;\n }\n .spw-group--buttons & {\n gap: 12px;\n width: 100%;\n @include breakpoint(md) {\n width: fit-content;\n }\n }\n .spw-group--checkboxes &,\n .spw-group--radios & {\n gap: 16px;\n }\n .spw-group--checkboxes.spw-group--horizontal &,\n .spw-group--radios.spw-group--horizontal & {\n gap: 16px;\n @include breakpoint(md) {\n gap: 24px;\n }\n }\n .spw-group--buttons.spw-group--align-right.spw-group--horizontal & {\n flex-direction: column;\n @include breakpoint(md) {\n flex-direction: row-reverse;\n }\n }\n .spw-group--buttons.spw-group--align-left.spw-group--horizontal.spw-group--reversed & {\n flex-direction: column-reverse;\n @include breakpoint(md) {\n flex-direction: row;\n }\n }\n }\n\n &--align-left {\n .spw-group__container {\n margin-right: auto;\n }\n }\n\n &--align-center {\n .spw-group__container {\n margin-left: auto;\n margin-right: auto;\n }\n }\n\n &--align-right {\n .spw-group__container {\n margin-left: auto;\n }\n }\n\n &--vertical {\n .spw-group__container {\n flex-direction: column;\n align-items: flex-start;\n\n .spw-group--align-center & {\n align-items: center;\n }\n\n .spw-group--align-right & {\n align-items: flex-end;\n }\n }\n }\n\n &--horizontal {\n .spw-group__container {\n flex-direction: column;\n @include breakpoint(md) {\n flex-direction: row;\n }\n }\n }\n\n &--disabled {\n opacity: 0.5;\n pointer-events: none;\n }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\n\n@Component({\n tag: 'spw-group',\n styleUrl: 'spw-group.scss',\n shadow: false,\n})\nexport class SpwGroup {\n @Element() host: HTMLSpwGroupElement;\n\n /** Type d'éléments contenus dans le groupe (buttons, checkboxes, radios) /\n @Prop() type: 'buttons' \| 'checkboxes' \| 'radios' = 'buttons';\n /* Orientation du groupe (horizontal ou vertical) /\n @Prop() orientation: 'horizontal' \| 'vertical' = 'horizontal';\n /* Alignement horizontal du groupe /\n @Prop() alignment: 'left' \| 'center' \| 'right' = 'left';\n /* Détermine si le groupe est désactivé /\n @Prop() disabled: boolean = false;\n /* Texte à afficher au-dessus de l'élément de formulaire /\n @Prop() label: string = '';\n /* Si `true`, le label comporte une astérisque /\n @Prop() required?: boolean;\n /* Si `true`, l'ordre des boutons est inversé en mobile (uniquement valable en cas d'alignement left) /\n @Prop() isReversed?: boolean = false;\n /* Attribut `name` de l'élément input /\n @Prop() name: string;\n /* Si vrai, le groupe prend toute la largeur /\n @Prop() isFullWidth?: boolean = false;\n\n private slotEl: HTMLSlotElement;\n\n componentDidLoad() {\n this.handleSlotChange();\n }\n\n private handleSlotChange = () => {\n const elements = this.slotEl?.assignedElements ? this.slotEl.assignedElements() : Array.from(this.host.querySelectorAll(''));\n\n elements.forEach(element => {\n if (this.disabled) {\n element.setAttribute('disabled', '');\n } else {\n element.removeAttribute('disabled');\n }\n });\n };\n\n private get groupClasses(): { [key: string]: boolean } {\n return {\n 'spw-group': true,\n 'spw-group--horizontal': this.orientation === 'horizontal',\n 'spw-group--vertical': this.orientation === 'vertical',\n 'spw-group--reversed': this.isReversed,\n 'spw-group--disabled': this.disabled,\n 'spw-group--is-full-width': this.isFullWidth,\n [`spw-group--${this.type}`]: true,\n [`spw-group--align-${this.alignment}`]: true,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.groupClasses}>\n {this.label && <spw-field-label class=\"spw-tw-mb-3\" label={this.label} name={this.name} required={this.required}></spw-field-label>}\n <div class=\"spw-group__container\">\n <slot ref={el => (this.slotEl = el as HTMLSlotElement)}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n","@import url('./assets/fontawesome/css/all.min.css');\n\n:host {\n line-height: 1;\n}\n\n.spw-icon.fa-solid,\n.spw-icon.fa-solid:before {\n font-family: var(--spw-ds-font-icons-solid);\n}\n\n.spw-icon.fa-brands,\n.spw-icon.fa-brands:before {\n font-family: var(--spw-ds-font-icons-brands);\n}\n\n.spw-icon.fa-regular,\n.spw-icon.fa-regular:before {\n font-weight: 400;\n font-family: var(--spw-ds-font-icons-solid);\n}\n\n.spw-icon {\n font-size: inherit;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-icon',\n styleUrl: 'spw-icon.scss',\n shadow: true,\n assetsDirs: ['assets'],\n})\nexport class SpwIcon {\n /** Permet de spécifier une référence d'icône Font Awesome /\n @Prop() icon: string;\n /* Permet de spécifier une variante de Font Awesome /\n @Prop() variant: 'fa-solid' \| 'fa-brands' \| 'fa-regular' = 'fa-solid';\n\n render() {\n const iconClassName = `spw-icon ${this.variant} ${this.icon}`;\n return <i class={iconClassName}></i>;\n }\n}\n",":host {\n display: inline;\n --spw-link-color: var(--spw-ds-primary);\n --spw-link-hover-color: var(--spw-ds-variant);\n --spw-link-active-color: var(--spw-ds-active);\n --spw-link-padding: 6px;\n}\n\n.spw-link {\n display: inline;\n text-decoration: none;\n cursor: pointer;\n color: var(--spw-link-color);\n border-radius: 4px;\n font-weight: 700;\n &--surface-dark {\n color: var(--spw-ds-white);\n }\n\n &__inner {\n display: inline;\n border-bottom: 1px solid var(--spw-link-color);\n .spw-link--surface-dark & {\n border-bottom: 1px solid var(--spw-ds-white);\n }\n }\n\n &:focus-visible {\n outline-offset: 2px;\n outline: 3px solid black;\n }\n\n &:hover {\n color: var(--spw-link-hover-color);\n .spw-link__inner {\n border-bottom: 2px solid var(--spw-link-hover-color);\n }\n }\n\n &:active {\n color: var(--spw-link-active-color);\n .spw-link__inner {\n border-bottom: 2px solid var(--spw-link-active-color);\n }\n }\n\n &[aria-disabled='true'] {\n pointer-events: none;\n color: var(--spw-color-themes-grey-grey-600);\n cursor: not-allowed;\n }\n\n &--surface-dark {\n &:hover {\n color: var(--spw-ds-white);\n .spw-link__inner {\n border-bottom: 2px solid var(--spw-ds-white);\n }\n }\n\n &:active {\n color: var(--spw-ds-white);\n .spw-link__inner {\n border-bottom: 2px solid var(--spw-ds-white);\n }\n }\n\n &[aria-disabled='true'] {\n color: var(--spw-ds-white);\n opacity: 0.5;\n }\n }\n\n &--has-icon-right spw-icon {\n margin-left: var(--spw-link-padding);\n margin-right: 4px;\n }\n\n &--has-icon-left spw-icon {\n margin-left: 4px;\n margin-right: var(--spw-link-padding);\n }\n}\n","import { Component, Element, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'spw-link',\n styleUrl: 'spw-link.scss',\n shadow: true,\n})\nexport class SpwLink {\n @Element() el: HTMLSpwLinkElement;\n\n /* Spécifie le lien href /\n @Prop() href: string;\n /* Attribut target (détermine où ouvrir le lien) /\n @Prop() target?: string = '_self';\n /* Remplit l'attribut rel /\n @Prop() rel?: string;\n /* Si rempli, permet d'utiliser une référence d'icône font-awesome /\n @Prop() icon?: string;\n /* Position de l'icône à l'intérieur du lien (gauche ou droite) /\n @Prop() iconPosition?: 'left' \| 'right' = 'right';\n /* Si désactivé, le lien n'est pas cliquable /\n @Prop() disabled?: boolean = false;\n /* Remplit l'attribut aria-label, utilisé à des fins d'accessibilité /\n @Prop() accAriaLabel?: string;\n /* Permet de choisir la surface d'arrière-plan du lien /\n @Prop() surface?: 'light' \| 'dark' = 'light';\n\n /* Événement déclenché lors du clic sur le lien /\n @Event() spwClick: EventEmitter<MouseEvent>;\n\n private onClick = (ev: MouseEvent) => {\n if (this.disabled) {\n ev.preventDefault();\n return;\n }\n this.spwClick.emit(ev);\n };\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-link': true,\n 'spw-link--has-icon-right': this.icon && this.iconPosition === 'right',\n 'spw-link--has-icon-left': this.icon && this.iconPosition === 'left',\n [`spw-link--surface-${this.surface}`]: true,\n 'spw-link--has-icon': !!this.icon,\n };\n }\n\n render() {\n const { href, rel, target, icon, iconPosition, accAriaLabel, disabled } = this;\n const ariaAttributes = {\n 'aria-label': accAriaLabel,\n 'aria-disabled': disabled ? 'true' : null,\n };\n\n const iconClass = `spw-icon--${iconPosition}`;\n const iconElement = icon ? <spw-icon class={iconClass} icon={icon}></spw-icon> : null;\n\n return (\n <a href={disabled ? undefined : href} rel={rel} target={target} class={this.elementClass} onClick={this.onClick} {...ariaAttributes}>\n {iconPosition === 'left' && iconElement}\n <div class=\"spw-link__inner\">\n <slot></slot>\n </div>\n {iconPosition === 'right' && iconElement}\n </a>\n );\n }\n}\n",":host {\n display: block;\n}\n\n.spw-separator {\n display: block;\n border-width: 1px;\n\n &--horizontal {\n border-bottom-style: solid;\n width: auto;\n height: 0;\n }\n\n &--vertical {\n border-right-style: solid;\n width: 0;\n height: auto;\n }\n\n &--dark {\n border-color: var(--spw-colors-support-grey-grey-300);\n }\n\n &--light {\n border-color: var(--spw-ds-white);\n }\n\n &--thickness-1 {\n border-width: 1px;\n }\n\n &--thickness-2 {\n border-width: 2px;\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-separator',\n styleUrl: 'spw-separator.scss',\n shadow: true,\n})\nexport class SpwSeparator {\n /* Permet de choisir la surface du séparateur (clair ou sombre) /\n @Prop() surface: 'dark' \| 'light' = 'dark';\n\n /* Permet de définir la direction du séparateur /\n @Prop() direction: 'vertical' \| 'horizontal' = 'horizontal';\n\n /* Définit l'épaisseur du séparateur /\n @Prop() thickness: 1 \| 2 = 1;\n\n /* Largeur du séparateur (par défaut 100% si non spécifié) /\n @Prop() width: string = '100%';\n\n /* Hauteur du séparateur (par défaut 100% si non spécifié) /\n @Prop() height: string = '100%';\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-separator': true,\n [`spw-separator--${this.surface}`]: true,\n [`spw-separator--${this.direction}`]: true,\n [`spw-separator--thickness-${this.thickness}`]: true,\n };\n }\n\n private get style(): { [key: string]: string } {\n return {\n width: this.direction === 'horizontal' ? `${this.width}px` : `${this.thickness}px`,\n height: this.direction === 'vertical' ? `${this.height}px` : `${this.thickness}px`,\n };\n }\n\n render() {\n return <div class={this.elementClass} style={this.style}></div>;\n }\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-red-red-500);\n --spw-ds-variant: var(--spw-color-themes-red-red-700);\n --spw-ds-active: var(--spw-color-themes-red-red-800);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-red-red-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-red-red-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-red-red-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-red-red-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-blue-blue-500);\n --spw-ds-variant: var(--spw-color-themes-blue-blue-700);\n --spw-ds-active: var(--spw-color-themes-blue-blue-800);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-blue-blue-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-blue-blue-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-blue-blue-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-blue-blue-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-light-blue-light-blue-600);\n --spw-ds-variant: var(--spw-color-themes-light-blue-light-blue-800);\n --spw-ds-active: var(--spw-color-themes-light-blue-light-blue-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-light-blue-light-blue-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-light-blue-light-blue-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-light-blue-light-blue-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-light-blue-light-blue-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-green-green-700);\n --spw-ds-variant: var(--spw-color-themes-green-green-800);\n --spw-ds-active: var(--spw-color-themes-green-green-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-green-green-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-green-green-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-green-green-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-green-green-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-light-green-light-green-700);\n --spw-ds-variant: var(--spw-color-themes-light-green-light-green-800);\n --spw-ds-active: var(--spw-color-themes-light-green-light-green-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-light-green-light-green-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-light-green-light-green-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-light-green-light-green-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-light-green-light-green-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-teal-teal-700);\n --spw-ds-variant: var(--spw-color-themes-teal-teal-800);\n --spw-ds-active: var(--spw-color-themes-teal-teal-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-teal-teal-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-teal-teal-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-teal-teal-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-teal-teal-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-orange-orange-700);\n --spw-ds-variant: var(--spw-color-themes-orange-orange-800);\n --spw-ds-active: var(--spw-color-themes-orange-orange-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-orange-orange-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-orange-orange-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-orange-orange-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-orange-orange-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-indigo-indigo-700);\n --spw-ds-variant: var(--spw-color-themes-indigo-indigo-800);\n --spw-ds-active: var(--spw-color-themes-indigo-indigo-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-indigo-indigo-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-indigo-indigo-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-indigo-indigo-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-indigo-indigo-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-purple-purple-500);\n --spw-ds-variant: var(--spw-color-themes-purple-purple-800);\n --spw-ds-active: var(--spw-color-themes-purple-purple-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-purple-purple-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-purple-purple-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-purple-purple-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-purple-purple-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-grey-grey-500);\n --spw-ds-variant: var(--spw-color-themes-grey-grey-800);\n --spw-ds-active: var(--spw-color-themes-grey-grey-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-grey-grey-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-grey-grey-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-grey-grey-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-grey-grey-800);\n}\n","import rougeTheme from './rouge.css';\nimport bleuTheme from './bleu.css';\nimport bleuClairTheme from './bleu-clair.css';\nimport vertTheme from './vert.css';\nimport vertLegerTheme from './vert-leger.css';\nimport turquoiseTheme from './turquoise.css';\nimport orangeTheme from './orange.css';\nimport indigoTheme from './indigo.css';\nimport mauveTheme from './mauve.css';\nimport grisTheme from './gris.css';\n\nexport const themes = {\n rouge: rougeTheme,\n bleu: bleuTheme,\n bleuClair: bleuClairTheme,\n vert: vertTheme,\n vertLeger: vertLegerTheme,\n orange: orangeTheme,\n turquoise: turquoiseTheme,\n indigo: indigoTheme,\n mauve: mauveTheme,\n gris: grisTheme,\n};\n\nexport type SpwTheme = keyof typeof themes;\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { themes, SpwTheme } from '@themes/themes';\n\n@Component({\n tag: 'spw-theme-provider',\n shadow: false,\n})\nexport class SpwThemeProvider {\n /* Définit le thème employé, conditionne les tokens associés au thème */\n @Prop() theme: SpwTheme = 'rouge';\n\n @Element() el: HTMLSpwThemeProviderElement;\n\n componentWillLoad() {\n this.applyTheme(this.theme);\n }\n\n componentWillUpdate() {\n this.applyTheme(this.theme);\n }\n\n private applyTheme(theme: SpwTheme) {\n const styleId = 'theme-styles';\n let styleElement = document.getElementById(styleId) as HTMLStyleElement;\n\n if (!styleElement) {\n styleElement = document.createElement('style');\n styleElement.id = styleId;\n document.head.appendChild(styleElement);\n }\n\n const css = themes[theme];\n styleElement.innerHTML = css;\n\n document.documentElement.setAttribute('data-theme', theme);\n }\n\n render() {\n return (\n <main class={`spw-theme-${this.theme}`}>\n <slot />\n </main>\n );\n }\n}\n"],"names":["rougeTheme","bleuTheme","bleuClairTheme","vertTheme","vertLegerTheme","orangeTheme","turquoiseTheme","indigoTheme","mauveTheme","grisTheme"],"mappings":"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"}
1	+ {"version":3,"file":"spw-field-label.spw-group.spw-icon.spw-link.spw-separator.spw-theme-provider.entry.esm.js","sources":["src/components/spw-field-label/spw-field-label.scss?tag=spw-field-label&encapsulation=shadow","src/components/spw-field-label/spw-field-label.tsx","src/components/spw-group/spw-group.scss?tag=spw-group","src/components/spw-group/spw-group.tsx","src/components/spw-icon/spw-icon.scss?tag=spw-icon&encapsulation=shadow","src/components/spw-icon/spw-icon.tsx","src/components/spw-link/spw-link.scss?tag=spw-link&encapsulation=shadow","src/components/spw-link/spw-link.tsx","src/components/spw-separator/spw-separator.scss?tag=spw-separator&encapsulation=shadow","src/components/spw-separator/spw-separator.tsx","src/themes/rouge.css","src/themes/bleu.css","src/themes/bleu-clair.css","src/themes/vert.css","src/themes/vert-leger.css","src/themes/turquoise.css","src/themes/orange.css","src/themes/indigo.css","src/themes/mauve.css","src/themes/gris.css","src/themes/themes.ts","src/components/spw-theme-provider/spw-theme-provider.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-field-label {\n color: var(--spw-color-themes-grey-grey-800);\n display: block;\n font-weight: 600;\n @apply spw-tw-mb-2;\n &__required {\n color: var(--spw-ds-primary);\n }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\n\n@Component({\n tag: 'spw-field-label',\n styleUrl: 'spw-field-label.scss',\n shadow: true,\n})\nexport class SpwFieldLabel {\n /** L'attribut id de l'élément input /\n @Prop() name: string;\n /* Texte à afficher au-dessus du champ de saisie /\n @Prop() label?: string = '';\n /* Indique si le champ est requis /\n @Prop() required?: boolean = false;\n\n @Element() el: HTMLSpwFieldLabelElement;\n\n private handleClick = () => {\n const rootNode = this.el.getRootNode() as ShadowRoot \| Document;\n const targetElement = rootNode.getElementById(this.name);\n\n if (targetElement) {\n (targetElement as HTMLElement).focus();\n }\n };\n\n render() {\n return (\n <Host>\n <label class=\"spw-field-label\" htmlFor={this.name} onClick={this.handleClick}>\n {this.label} {this.required && <span class=\"spw-field-label__required\"></span>}\n </label>\n </Host>\n );\n }\n}\n",":host {\n display: block;\n width: 100%;\n}\n\n.spw-group {\n spw-button:not[is-fullwidth-mobile='false'] {\n display: block;\n width: 100%;\n @include breakpoint(md) {\n display: initial;\n width: auto;\n }\n }\n\n &__container {\n display: flex;\n width: fit-content;\n\n .spw-group--is-full-width & {\n width: 100% !important;\n }\n\n @include breakpoint(md) {\n align-items: center;\n }\n .spw-group--buttons & {\n gap: 12px;\n width: 100%;\n @include breakpoint(md) {\n width: fit-content;\n }\n }\n .spw-group--checkboxes &,\n .spw-group--radios & {\n gap: 16px;\n }\n .spw-group--checkboxes.spw-group--horizontal &,\n .spw-group--radios.spw-group--horizontal & {\n gap: 16px;\n @include breakpoint(md) {\n gap: 24px;\n }\n }\n .spw-group--buttons.spw-group--align-right.spw-group--horizontal & {\n flex-direction: column;\n @include breakpoint(md) {\n flex-direction: row-reverse;\n }\n }\n .spw-group--buttons.spw-group--align-left.spw-group--horizontal.spw-group--reversed & {\n flex-direction: column-reverse;\n @include breakpoint(md) {\n flex-direction: row;\n }\n }\n }\n\n &--align-left {\n .spw-group__container {\n margin-right: auto;\n }\n }\n\n &--align-center {\n .spw-group__container {\n margin-left: auto;\n margin-right: auto;\n }\n }\n\n &--align-right {\n .spw-group__container {\n margin-left: auto;\n }\n }\n\n &--vertical {\n .spw-group__container {\n flex-direction: column;\n align-items: flex-start;\n\n .spw-group--align-center & {\n align-items: center;\n }\n\n .spw-group--align-right & {\n align-items: flex-end;\n }\n }\n }\n\n &--horizontal {\n .spw-group__container {\n flex-direction: column;\n @include breakpoint(md) {\n flex-direction: row;\n }\n }\n }\n\n &--disabled {\n opacity: 0.5;\n pointer-events: none;\n }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\n\n@Component({\n tag: 'spw-group',\n styleUrl: 'spw-group.scss',\n shadow: false,\n})\nexport class SpwGroup {\n @Element() host: HTMLSpwGroupElement;\n\n /** Type d'éléments contenus dans le groupe (buttons, checkboxes, radios) /\n @Prop() type: 'buttons' \| 'checkboxes' \| 'radios' = 'buttons';\n /* Orientation du groupe (horizontal ou vertical) /\n @Prop() orientation: 'horizontal' \| 'vertical' = 'horizontal';\n /* Alignement horizontal du groupe /\n @Prop() alignment: 'left' \| 'center' \| 'right' = 'left';\n /* Détermine si le groupe est désactivé /\n @Prop() disabled: boolean = false;\n /* Texte à afficher au-dessus de l'élément de formulaire /\n @Prop() label: string = '';\n /* Si `true`, le label comporte une astérisque /\n @Prop() required?: boolean;\n /* Si `true`, l'ordre des boutons est inversé en mobile (uniquement valable en cas d'alignement left) /\n @Prop() isReversed?: boolean = false;\n /* Attribut `name` de l'élément input /\n @Prop() name: string;\n /* Si vrai, le groupe prend toute la largeur /\n @Prop() isFullWidth?: boolean = false;\n\n private slotEl: HTMLSlotElement;\n\n componentDidLoad() {\n this.handleSlotChange();\n }\n\n private handleSlotChange = () => {\n const elements = this.slotEl?.assignedElements ? this.slotEl.assignedElements() : Array.from(this.host.querySelectorAll(''));\n\n elements.forEach(element => {\n if (this.disabled) {\n element.setAttribute('disabled', '');\n } else {\n element.removeAttribute('disabled');\n }\n });\n };\n\n private get groupClasses(): { [key: string]: boolean } {\n return {\n 'spw-group': true,\n 'spw-group--horizontal': this.orientation === 'horizontal',\n 'spw-group--vertical': this.orientation === 'vertical',\n 'spw-group--reversed': this.isReversed,\n 'spw-group--disabled': this.disabled,\n 'spw-group--is-full-width': this.isFullWidth,\n [`spw-group--${this.type}`]: true,\n [`spw-group--align-${this.alignment}`]: true,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.groupClasses}>\n {this.label && <spw-field-label class=\"spw-tw-mb-3\" label={this.label} name={this.name} required={this.required}></spw-field-label>}\n <div class=\"spw-group__container\">\n <slot ref={el => (this.slotEl = el as HTMLSlotElement)}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n","@import url('./assets/fontawesome/css/all.min.css');\n\n:host {\n line-height: 1;\n}\n\n.spw-icon.fa-solid,\n.spw-icon.fa-solid:before {\n font-family: var(--spw-ds-font-icons-solid);\n}\n\n.spw-icon.fa-brands,\n.spw-icon.fa-brands:before {\n font-family: var(--spw-ds-font-icons-brands);\n}\n\n.spw-icon.fa-regular,\n.spw-icon.fa-regular:before {\n font-weight: 400;\n font-family: var(--spw-ds-font-icons-solid);\n}\n\n.spw-icon {\n font-size: inherit;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-icon',\n styleUrl: 'spw-icon.scss',\n shadow: true,\n assetsDirs: ['assets'],\n})\nexport class SpwIcon {\n /** Permet de spécifier une référence d'icône Font Awesome /\n @Prop() icon: string;\n /* Permet de spécifier une variante de Font Awesome /\n @Prop() variant: 'fa-solid' \| 'fa-brands' \| 'fa-regular' = 'fa-solid';\n\n render() {\n const iconClassName = `spw-icon ${this.variant} ${this.icon}`;\n return <i class={iconClassName}></i>;\n }\n}\n",":host {\n display: inline;\n --spw-link-color: var(--spw-ds-primary);\n --spw-link-hover-color: var(--spw-ds-variant);\n --spw-link-active-color: var(--spw-ds-active);\n --spw-link-font-weight: 700;\n --spw-link-padding: 6px;\n}\n\n.spw-link {\n display: inline;\n text-decoration: none;\n cursor: pointer;\n color: var(--spw-link-color);\n border-radius: 4px;\n font-weight: var(--spw-link-font-weight);\n &--surface-dark {\n color: var(--spw-ds-white);\n }\n\n &__inner {\n display: inline;\n border-bottom: 1px solid var(--spw-link-color);\n .spw-link--surface-dark & {\n border-bottom: 1px solid var(--spw-ds-white);\n }\n }\n\n &:focus-visible {\n outline-offset: 2px;\n outline: 3px solid black;\n }\n\n &:hover {\n color: var(--spw-link-hover-color);\n .spw-link__inner {\n border-bottom: 2px solid var(--spw-link-hover-color);\n }\n }\n\n &:active {\n color: var(--spw-link-active-color);\n .spw-link__inner {\n border-bottom: 2px solid var(--spw-link-active-color);\n }\n }\n\n &[aria-disabled='true'] {\n pointer-events: none;\n color: var(--spw-color-themes-grey-grey-600);\n cursor: not-allowed;\n }\n\n &--surface-dark {\n &:hover {\n color: var(--spw-ds-white);\n .spw-link__inner {\n border-bottom: 2px solid var(--spw-ds-white);\n }\n }\n\n &:active {\n color: var(--spw-ds-white);\n .spw-link__inner {\n border-bottom: 2px solid var(--spw-ds-white);\n }\n }\n\n &[aria-disabled='true'] {\n color: var(--spw-ds-white);\n opacity: 0.5;\n }\n }\n\n &--has-icon-right spw-icon {\n margin-left: var(--spw-link-padding);\n margin-right: 4px;\n }\n\n &--has-icon-left spw-icon {\n margin-left: 4px;\n margin-right: var(--spw-link-padding);\n }\n}\n","import { Component, Element, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'spw-link',\n styleUrl: 'spw-link.scss',\n shadow: true,\n})\nexport class SpwLink {\n @Element() el: HTMLSpwLinkElement;\n\n /* Spécifie le lien href /\n @Prop() href: string;\n /* Attribut target (détermine où ouvrir le lien) /\n @Prop() target?: string = '_self';\n /* Remplit l'attribut rel /\n @Prop() rel?: string;\n /* Si rempli, permet d'utiliser une référence d'icône font-awesome /\n @Prop() icon?: string;\n /* Position de l'icône à l'intérieur du lien (gauche ou droite) /\n @Prop() iconPosition?: 'left' \| 'right' = 'right';\n /* Si désactivé, le lien n'est pas cliquable /\n @Prop() disabled?: boolean = false;\n /* Remplit l'attribut aria-label, utilisé à des fins d'accessibilité /\n @Prop() accAriaLabel?: string;\n /* Permet de choisir la surface d'arrière-plan du lien /\n @Prop() surface?: 'light' \| 'dark' = 'light';\n\n /* Événement déclenché lors du clic sur le lien /\n @Event() spwClick: EventEmitter<MouseEvent>;\n\n private onClick = (ev: MouseEvent) => {\n if (this.disabled) {\n ev.preventDefault();\n return;\n }\n this.spwClick.emit(ev);\n };\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-link': true,\n 'spw-link--has-icon-right': this.icon && this.iconPosition === 'right',\n 'spw-link--has-icon-left': this.icon && this.iconPosition === 'left',\n [`spw-link--surface-${this.surface}`]: true,\n 'spw-link--has-icon': !!this.icon,\n };\n }\n\n render() {\n const { href, rel, target, icon, iconPosition, accAriaLabel, disabled } = this;\n const ariaAttributes = {\n 'aria-label': accAriaLabel,\n 'aria-disabled': disabled ? 'true' : null,\n };\n\n const iconClass = `spw-icon--${iconPosition}`;\n const iconElement = icon ? <spw-icon class={iconClass} icon={icon}></spw-icon> : null;\n\n return (\n <a href={disabled ? undefined : href} rel={rel} target={target} class={this.elementClass} onClick={this.onClick} {...ariaAttributes}>\n {iconPosition === 'left' && iconElement}\n <div class=\"spw-link__inner\">\n <slot></slot>\n </div>\n {iconPosition === 'right' && iconElement}\n </a>\n );\n }\n}\n",":host {\n display: block;\n}\n\n.spw-separator {\n display: block;\n border-width: 1px;\n\n &--horizontal {\n border-bottom-style: solid;\n width: auto;\n height: 0;\n }\n\n &--vertical {\n border-right-style: solid;\n width: 0;\n height: auto;\n }\n\n &--dark {\n border-color: var(--spw-colors-support-grey-grey-300);\n }\n\n &--light {\n border-color: var(--spw-ds-white);\n }\n\n &--thickness-1 {\n border-width: 1px;\n }\n\n &--thickness-2 {\n border-width: 2px;\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'spw-separator',\n styleUrl: 'spw-separator.scss',\n shadow: true,\n})\nexport class SpwSeparator {\n /* Permet de choisir la surface du séparateur (clair ou sombre) /\n @Prop() surface: 'dark' \| 'light' = 'dark';\n\n /* Permet de définir la direction du séparateur /\n @Prop() direction: 'vertical' \| 'horizontal' = 'horizontal';\n\n /* Définit l'épaisseur du séparateur /\n @Prop() thickness: 1 \| 2 = 1;\n\n /* Largeur du séparateur (par défaut 100% si non spécifié) /\n @Prop() width: string = '100%';\n\n /* Hauteur du séparateur (par défaut 100% si non spécifié) /\n @Prop() height: string = '100%';\n\n private get elementClass(): { [className: string]: boolean } {\n return {\n 'spw-separator': true,\n [`spw-separator--${this.surface}`]: true,\n [`spw-separator--${this.direction}`]: true,\n [`spw-separator--thickness-${this.thickness}`]: true,\n };\n }\n\n private get style(): { [key: string]: string } {\n return {\n width: this.direction === 'horizontal' ? `${this.width}px` : `${this.thickness}px`,\n height: this.direction === 'vertical' ? `${this.height}px` : `${this.thickness}px`,\n };\n }\n\n render() {\n return <div class={this.elementClass} style={this.style}></div>;\n }\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-red-red-500);\n --spw-ds-variant: var(--spw-color-themes-red-red-700);\n --spw-ds-active: var(--spw-color-themes-red-red-800);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-red-red-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-red-red-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-red-red-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-red-red-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-blue-blue-500);\n --spw-ds-variant: var(--spw-color-themes-blue-blue-700);\n --spw-ds-active: var(--spw-color-themes-blue-blue-800);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-blue-blue-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-blue-blue-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-blue-blue-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-blue-blue-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-light-blue-light-blue-600);\n --spw-ds-variant: var(--spw-color-themes-light-blue-light-blue-800);\n --spw-ds-active: var(--spw-color-themes-light-blue-light-blue-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-light-blue-light-blue-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-light-blue-light-blue-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-light-blue-light-blue-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-light-blue-light-blue-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-green-green-700);\n --spw-ds-variant: var(--spw-color-themes-green-green-800);\n --spw-ds-active: var(--spw-color-themes-green-green-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-green-green-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-green-green-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-green-green-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-green-green-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-light-green-light-green-700);\n --spw-ds-variant: var(--spw-color-themes-light-green-light-green-800);\n --spw-ds-active: var(--spw-color-themes-light-green-light-green-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-light-green-light-green-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-light-green-light-green-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-light-green-light-green-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-light-green-light-green-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-teal-teal-700);\n --spw-ds-variant: var(--spw-color-themes-teal-teal-800);\n --spw-ds-active: var(--spw-color-themes-teal-teal-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-teal-teal-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-teal-teal-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-teal-teal-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-teal-teal-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-orange-orange-700);\n --spw-ds-variant: var(--spw-color-themes-orange-orange-800);\n --spw-ds-active: var(--spw-color-themes-orange-orange-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-orange-orange-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-orange-orange-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-orange-orange-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-orange-orange-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-indigo-indigo-700);\n --spw-ds-variant: var(--spw-color-themes-indigo-indigo-800);\n --spw-ds-active: var(--spw-color-themes-indigo-indigo-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-indigo-indigo-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-indigo-indigo-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-indigo-indigo-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-indigo-indigo-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-purple-purple-500);\n --spw-ds-variant: var(--spw-color-themes-purple-purple-800);\n --spw-ds-active: var(--spw-color-themes-purple-purple-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-purple-purple-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-purple-purple-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-purple-purple-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-purple-purple-800);\n}\n","@import '_base.css';\n\n:root {\n --spw-ds-primary: var(--spw-color-themes-grey-grey-500);\n --spw-ds-variant: var(--spw-color-themes-grey-grey-800);\n --spw-ds-active: var(--spw-color-themes-grey-grey-900);\n --spw-ds-cta-outlined-bg-hover: var(--spw-color-themes-grey-grey-50);\n --spw-ds-cta-outlined-stroke-hover: var(--spw-color-themes-grey-grey-700);\n --spw-ds-cta-outlined-bg-active: var(--spw-color-themes-grey-grey-100);\n --spw-ds-cta-outlined-stroke-active: var(--spw-color-themes-grey-grey-800);\n}\n","import rougeTheme from './rouge.css';\nimport bleuTheme from './bleu.css';\nimport bleuClairTheme from './bleu-clair.css';\nimport vertTheme from './vert.css';\nimport vertLegerTheme from './vert-leger.css';\nimport turquoiseTheme from './turquoise.css';\nimport orangeTheme from './orange.css';\nimport indigoTheme from './indigo.css';\nimport mauveTheme from './mauve.css';\nimport grisTheme from './gris.css';\n\nexport const themes = {\n rouge: rougeTheme,\n bleu: bleuTheme,\n bleuClair: bleuClairTheme,\n vert: vertTheme,\n vertLeger: vertLegerTheme,\n orange: orangeTheme,\n turquoise: turquoiseTheme,\n indigo: indigoTheme,\n mauve: mauveTheme,\n gris: grisTheme,\n};\n\nexport type SpwTheme = keyof typeof themes;\n","import { Component, Prop, h, Element } from '@stencil/core';\nimport { themes, SpwTheme } from '@themes/themes';\n\n@Component({\n tag: 'spw-theme-provider',\n shadow: false,\n})\nexport class SpwThemeProvider {\n /* Définit le thème employé, conditionne les tokens associés au thème */\n @Prop() theme: SpwTheme = 'rouge';\n\n @Element() el: HTMLSpwThemeProviderElement;\n\n componentWillLoad() {\n this.applyTheme(this.theme);\n }\n\n componentWillUpdate() {\n this.applyTheme(this.theme);\n }\n\n private applyTheme(theme: SpwTheme) {\n const styleId = 'theme-styles';\n let styleElement = document.getElementById(styleId) as HTMLStyleElement;\n\n if (!styleElement) {\n styleElement = document.createElement('style');\n styleElement.id = styleId;\n document.head.appendChild(styleElement);\n }\n\n const css = themes[theme];\n styleElement.innerHTML = css;\n\n document.documentElement.setAttribute('data-theme', theme);\n }\n\n render() {\n return (\n <main class={`spw-theme-${this.theme}`}>\n <slot />\n </main>\n );\n }\n}\n"],"names":["rougeTheme","bleuTheme","bleuClairTheme","vertTheme","vertLegerTheme","orangeTheme","turquoiseTheme","indigoTheme","mauveTheme","grisTheme"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spw-header-persona.entry.esm.js","sources":["src/components/spw-header/spw-header-persona/spw-header-persona.scss?tag=spw-header-persona&encapsulation=shadow","src/components/spw-header/spw-header-persona/spw-header-persona.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-header-persona {\n position: relative;\n @include under-breakpoint(lg) {\n border-bottom: 1px solid var(--spw-colors-support-grey-grey-300);\n padding-top: 24px;\n padding-bottom: 24px;\n }\n @include breakpoint(lg) {\n padding-left: 24px;\n margin-left: 24px;\n border-left: 1px solid var(--spw-colors-support-grey-grey-300);\n }\n\n &__label {\n font-size: 14px;\n margin-bottom: 2px;\n display: block;\n color: var(--spw-colors-support-grey-grey-700);\n @include under-breakpoint(lg) {\n display: none;\n }\n }\n\n &__active-persona {\n position: relative;\n display: flex;\n gap: 6px;\n justify-content: space-between;\n cursor: pointer;\n font-weight: bold;\n text-decoration: none;\n color: var(--spw-colors-support-grey-grey-900);\n @include breakpoint(lg) {\n text-decoration: underline;\n .spw-header-persona:hover & {\n text-decoration: none;\n }\n }\n }\n\n &__trigger {\n display: block;\n .spw-header-persona--opened & {\n transform: rotate(180deg);\n }\n }\n\n &__select {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: pointer;\n z-index: 2;\n }\n\n &__dropdown {\n display: none;\n overflow: hidden;\n .spw-header-persona--opened & {\n display: block;\n @include breakpoint(lg) {\n position: absolute;\n width: max-content;\n z-index: 99999;\n background: white;\n border-radius: 4px;\n box-shadow: var(--spw-effect-elevation-8);\n }\n }\n }\n}\n","import { Component, h, Host, Element, State } from '@stencil/core';\n\n@Component({\n tag: 'spw-header-persona',\n styleUrl: 'spw-header-persona.scss',\n shadow: true,\n})\nexport class SpwHeaderPersona {\n @Element() el!: HTMLElement;\n @State() activePersona: string = '';\n @State() options: HTMLOptionElement[] = [];\n\n private selectEl!: HTMLSelectElement;\n\n componentWillLoad() {\n this.setInitialPersona();\n }\n\n componentDidLoad() {\n this.moveOptionsToSelect();\n }\n\n private setInitialPersona() {\n const selected = this.el.querySelector('option[selected]');\n this.activePersona = selected?.textContent?.trim() \|\| '';\n }\n\n private moveOptionsToSelect() {\n const lightDomOptions = Array.from(this.el.querySelectorAll('option'));\n this.options = lightDomOptions;\n lightDomOptions.forEach(option => {\n this.selectEl.appendChild(option);\n });\n }\n\n private handleChange(event: Event) {\n const select = event.target as HTMLSelectElement;\n const selectedOption = select.selectedOptions[0];\n this.activePersona = selectedOption?.textContent?.trim() \|\| '';\n const link = selectedOption?.getAttribute('data-link');\n if (link) {\n window.location.href = link;\n }\n }\n\n private handleButtonClick = () => {\n this.selectEl?.click();\n };\n\n private handleButtonKeyDown = (event: KeyboardEvent) => {\n if (event.key === ' ' \|\| event.key === 'Enter') {\n event.preventDefault();\n this.selectEl?.click();\n }\n };\n\n render() {\n return (\n <Host>\n <div class=\"spw-header-persona\" onClick={this.handleButtonClick} onKeyDown={this.handleButtonKeyDown}>\n <span class=\"spw-header-persona__label\">~~Je suis :</~~span>\n <div class=\"spw-header-persona__active-persona\">\n {this.activePersona} <spw-icon icon=\"fa-chevron-down\"></spw-icon>\n </div>\n <select class=\"spw-header-persona__select\" ref={el => (this.selectEl = el as HTMLSelectElement)} onChange={e => this.handleChange(e)} tabIndex={-1} />\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,mBAAmB,GAAG,ojIAAojI;;MCOnkI,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA~~;;AAOW~~,QAAA,IAAa,CAAA,aAAA,GAAW,EAAE;AAC1B,QAAA,IAAO,CAAA,OAAA,GAAwB,EAAE;AAmClC,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAK;;YAC/B,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;AACxB,SAAC;AAEO,QAAA,IAAA,CAAA,mBAAmB,GAAG,CAAC,KAAoB,KAAI;;AACrD,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;gBAC9C,KAAK,CAAC,cAAc,EAAE;gBACtB,CAAA,EAAA,GAAA,IAAI,CAAC,QAAQ,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;AAE1B,SAAC;AAeF;IAvDC,iBAAiB,GAAA;QACf,IAAI,CAAC,iBAAiB,EAAE;;IAG1B,gBAAgB,GAAA;QACd,IAAI,CAAC,mBAAmB,EAAE;;IAGpB,iBAAiB,GAAA;;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC;QAC1D,IAAI,CAAC,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,MAAA,GAAA,MAAA,GAAA,QAAQ,CAAE,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,EAAE,KAAI,EAAE;;IAGlD,mBAAmB,GAAA;AACzB,QAAA,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AACtE,QAAA,IAAI,CAAC,OAAO,GAAG,eAAe;AAC9B,QAAA,eAAe,CAAC,OAAO,CAAC,MAAM,IAAG;AAC/B,YAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC;AACnC,SAAC,CAAC;;AAGI,IAAA,YAAY,CAAC,KAAY,EAAA;;AAC/B,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B;QAChD,MAAM,cAAc,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;QAChD,IAAI,CAAC,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,cAAc,KAAd,IAAA,IAAA,cAAc,KAAd,MAAA,GAAA,MAAA,GAAA,cAAc,CAAE,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,EAAE,KAAI,EAAE;QAC9D,MAAM,IAAI,GAAG,cAAc,KAAA,IAAA,IAAd,cAAc,KAAA,MAAA,GAAA,MAAA,GAAd,cAAc,CAAE,YAAY,CAAC,WAAW,CAAC;QACtD,IAAI,IAAI,EAAE;AACR,YAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI;;;IAe/B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAA,EAClG,~~CAAM~~,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAA~~,KAAK,EAAC,2BAA2B,~~EAAiB~~,~~EAAA~~,~~WAAA~~,~~CAAA~~,~~EACxD~~,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oCAAoC,EAAA,EAC5C,IAAI,CAAC,aAAa,OAAE,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,iBAAiB,EAAA,CAAY,CAC7D,EACN,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,4BAA4B,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAuB,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,GAAI,CAClJ,CACD;;;;;;;;"}
1	+ {"version":3,"file":"spw-header-persona.entry.esm.js","sources":["src/components/spw-header/spw-header-persona/spw-header-persona.scss?tag=spw-header-persona&encapsulation=shadow","src/components/spw-header/spw-header-persona/spw-header-persona.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.spw-header-persona {\n position: relative;\n @include under-breakpoint(lg) {\n border-bottom: 1px solid var(--spw-colors-support-grey-grey-300);\n padding-top: 24px;\n padding-bottom: 24px;\n }\n @include breakpoint(lg) {\n padding-left: 24px;\n margin-left: 24px;\n border-left: 1px solid var(--spw-colors-support-grey-grey-300);\n }\n\n &__label {\n font-size: 14px;\n margin-bottom: 2px;\n display: block;\n color: var(--spw-colors-support-grey-grey-700);\n @include under-breakpoint(lg) {\n display: none;\n }\n }\n\n &__active-persona {\n position: relative;\n display: flex;\n gap: 6px;\n justify-content: space-between;\n cursor: pointer;\n font-weight: bold;\n text-decoration: none;\n color: var(--spw-colors-support-grey-grey-900);\n @include breakpoint(lg) {\n text-decoration: underline;\n .spw-header-persona:hover & {\n text-decoration: none;\n }\n }\n }\n\n &__trigger {\n display: block;\n .spw-header-persona--opened & {\n transform: rotate(180deg);\n }\n }\n\n &__select {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n cursor: pointer;\n z-index: 2;\n }\n\n &__dropdown {\n display: none;\n overflow: hidden;\n .spw-header-persona--opened & {\n display: block;\n @include breakpoint(lg) {\n position: absolute;\n width: max-content;\n z-index: 99999;\n background: white;\n border-radius: 4px;\n box-shadow: var(--spw-effect-elevation-8);\n }\n }\n }\n}\n","import { Component, h, Prop, Host, Element, State } from '@stencil/core';\n\n@Component({\n tag: 'spw-header-persona',\n styleUrl: 'spw-header-persona.scss',\n shadow: true,\n})\nexport class SpwHeaderPersona {\n /** Label pour le choix du persona (à appliquer sur spw-header-persona) */\n @Prop() personaLabel?: string = 'Je suis :';\n\n @Element() el!: HTMLElement;\n @State() activePersona: string = '';\n @State() options: HTMLOptionElement[] = [];\n\n private selectEl!: HTMLSelectElement;\n\n componentWillLoad() {\n this.setInitialPersona();\n }\n\n componentDidLoad() {\n this.moveOptionsToSelect();\n }\n\n private setInitialPersona() {\n const selected = this.el.querySelector('option[selected]');\n this.activePersona = selected?.textContent?.trim() \|\| '';\n }\n\n private moveOptionsToSelect() {\n const lightDomOptions = Array.from(this.el.querySelectorAll('option'));\n this.options = lightDomOptions;\n lightDomOptions.forEach(option => {\n this.selectEl.appendChild(option);\n });\n }\n\n private handleChange(event: Event) {\n const select = event.target as HTMLSelectElement;\n const selectedOption = select.selectedOptions[0];\n this.activePersona = selectedOption?.textContent?.trim() \|\| '';\n const link = selectedOption?.getAttribute('data-link');\n if (link) {\n window.location.href = link;\n }\n }\n\n private handleButtonClick = () => {\n this.selectEl?.click();\n };\n\n private handleButtonKeyDown = (event: KeyboardEvent) => {\n if (event.key === ' ' \|\| event.key === 'Enter') {\n event.preventDefault();\n this.selectEl?.click();\n }\n };\n\n render() {\n return (\n <Host>\n <div class=\"spw-header-persona\" onClick={this.handleButtonClick} onKeyDown={this.handleButtonKeyDown}>\n <span class=\"spw-header-persona__label\">{this.personaLabel}</span>\n <div class=\"spw-header-persona__active-persona\">\n {this.activePersona} <spw-icon icon=\"fa-chevron-down\"></spw-icon>\n </div>\n <select class=\"spw-header-persona__select\" ref={el => (this.selectEl = el as HTMLSelectElement)} onChange={e => this.handleChange(e)} tabIndex={-1} />\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}