npm - @nationalarchives/frontend - Versions diffs - 0.2.18 → 0.4.0 - Mend

@nationalarchives/frontend 0.2.18 → 0.4.0

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

package/nationalarchives/components/checkboxes/checkboxes.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/checkboxes/checkboxes.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/variables/_a11y.scss"],"names":[],"mappings":"AAsLA,uEAxKM,0yDA2KJ,+BAHF,uEAxJM,qwDCxBN,gBACE,mBAEA,aACA,sBACA,uBACA,oBACA,SAEA,sBACE,kBAEA,4BACE,UACA,WACA,SACA,UAEA,kBACA,SACA,UAEA,UAGF,4BACE,kBAEA,cAEA,iBAEA,eAEA,uEAEE,WAEA,WAEA,kBACA,MACA,OAKF,oCACE,YAEA,cACA,sBAEA,UDJN,6DA0BI,mDCdE,mBAGF,mCACE,cACA,aACA,sBAEA,aAEA,SACA,UACA,UDEF,2DCCE,mCAGA,2DAKN,uBACE,QAIA,mDACE,kBAEA,mBAEA,2DACE,aACA,cAGF,0DACE,cACA,eACA,qBAEA,WACA,YAKN,wBACE,mBAEA,mBACA,cC9DF,wBD0DA,wBAOI,sBACA,wBAKF,2CDhCA,yDGpFF,eCZqB,IDgBrB,iBFuHE,gDDvCA,yDGpFF,eCZqB,IH6InB,kDDvFF,uDC2FE,iDACE,cAMF,gHACE","file":"checkboxes.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-list-marker: var(--font-base);\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n // --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n\n.tna-checkboxes {\n align-self: stretch;\n\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n align-items: stretch;\n gap: spacing.space(1);\n\n &__item {\n position: relative;\n\n input {\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n\n position: absolute;\n top: -1px;\n left: -1px;\n\n opacity: 0;\n }\n\n &-label {\n padding-left: spacing.space(3);\n\n display: block;\n\n line-height: 2rem;\n\n cursor: pointer;\n\n &::before,\n &::after {\n content: \"\";\n\n width: 2rem;\n\n position: absolute;\n top: 0;\n left: 0;\n\n @include colour.always-light;\n }\n\n &::before {\n height: 2rem;\n\n display: block;\n box-sizing: border-box;\n\n z-index: 1;\n\n @include colour.colour-background(\"input-background\");\n\n @include colour.colour-border(\n \"input-border\",\n forms.$form-field-border-width\n );\n border-radius: 0.1px;\n }\n\n &::after {\n width: 1.25rem;\n height: 0.5rem;\n margin-top: -0.1875rem;\n\n display: none;\n\n top: 1rem;\n left: 1rem;\n z-index: 2;\n\n @include colour.colour-border(\"input-background\", 0, solid);\n border-width: 0 0 forms.$checkbox-checkmark-width\n forms.$checkbox-checkmark-width;\n\n transform: translateX(-50%) translateY(-50%) rotate(-45deg);\n }\n }\n }\n\n &--small {\n gap: spacing.space(0.5);\n }\n\n &--small &__item {\n &-label {\n padding-left: spacing.space(2.25);\n\n line-height: 1.5rem;\n\n &::before {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n &::after {\n width: 0.825rem;\n height: 0.375rem;\n margin-top: -0.125rem;\n\n top: 0.75rem;\n left: 0.75rem;\n }\n }\n }\n\n &--inline {\n flex-flow: row wrap;\n\n align-items: center;\n gap: spacing.space(1) spacing.space(2);\n\n @include media.on-tiny {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n\n &__item-label:active {\n &::before {\n @include a11y.focus-outline;\n @include a11y.active-outline;\n }\n }\n\n input:focus + &__item-label {\n &::before {\n @include a11y.focus-outline;\n }\n }\n\n input:checked + &__item-label {\n &::before {\n @include colour.colour-background(\"input-foreground\");\n }\n\n &::after {\n display: block;\n }\n }\n\n input:focus + &__item-label,\n &__item:hover &__item-label {\n &::before {\n box-shadow: 0 0 0 0.125rem var(--input-border);\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../variables/a11y\";\n@use \"colour\";\n\n@mixin focus-outline-without-offset {\n @include colour.colour-outline(\n \"focus-outline\",\n a11y.$focus-outline-width,\n solid\n );\n}\n\n@mixin focus-outline {\n @include focus-outline-without-offset;\n outline-offset: a11y.$focus-outline-offset;\n}\n\n@mixin active-outline {\n outline-offset: 0;\n}\n\n@mixin no-focus-outline-on-click {\n .tna-template--clicked &:focus {\n outline: none;\n }\n}\n","$focus-outline-width: 5px !default;\n$focus-outline-offset: 2px !default;\n$focus-outline-padding: $focus-outline-width + $focus-outline-offset;\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/checkboxes/checkboxes.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/variables/_a11y.scss"],"names":[],"mappings":"AAuLA,uEAzKM,0yDA4KJ,+BAHF,uEAzJM,qwDCxBN,gBACE,mBAEA,aACA,sBACA,uBACA,oBACA,SAEA,sBACE,kBAEA,4BACE,UACA,WACA,SACA,UAEA,kBACA,SACA,UAEA,UAGF,4BACE,kBAEA,cAEA,iBAEA,eAEA,uEAEE,WAEA,WAEA,kBACA,MACA,OAKF,oCACE,YAEA,cACA,sBAEA,UDJN,6DA2BI,mDCfE,mBAGF,mCACE,cACA,aACA,sBAEA,aAEA,SACA,UACA,UDGF,8FCGE,2DAKN,uBACE,QAIA,mDACE,kBAEA,mBAEA,2DACE,aACA,cAGF,0DACE,cACA,eACA,qBAEA,WACA,YAKN,wBACE,mBAEA,mBACA,cC9DF,wBD0DA,wBAOI,sBACA,wBAKF,2CD/BA,yDGrFF,eCZqB,IDgBrB,iBFuHE,gDDtCA,yDGrFF,eCZqB,IH6InB,kDDvFF,uDC2FE,iDACE,cAMF,gHACE","file":"checkboxes.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-list-marker: var(--font-base);\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n // --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/a11y\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n\n.tna-checkboxes {\n align-self: stretch;\n\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n align-items: stretch;\n gap: spacing.space(1);\n\n &__item {\n position: relative;\n\n input {\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n\n position: absolute;\n top: -1px;\n left: -1px;\n\n opacity: 0;\n }\n\n &-label {\n padding-left: spacing.space(3);\n\n display: block;\n\n line-height: 2rem;\n\n cursor: pointer;\n\n &::before,\n &::after {\n content: \"\";\n\n width: 2rem;\n\n position: absolute;\n top: 0;\n left: 0;\n\n @include colour.always-light;\n }\n\n &::before {\n height: 2rem;\n\n display: block;\n box-sizing: border-box;\n\n z-index: 1;\n\n @include colour.colour-background(\"input-background\");\n\n @include colour.colour-border(\n \"input-border\",\n forms.$form-field-border-width\n );\n border-radius: 0.1px;\n }\n\n &::after {\n width: 1.25rem;\n height: 0.5rem;\n margin-top: -0.1875rem;\n\n display: none;\n\n top: 1rem;\n left: 1rem;\n z-index: 2;\n\n @include colour.colour-border(\"input-background\", 0, solid);\n border-width: 0 0 forms.$checkbox-checkmark-width\n forms.$checkbox-checkmark-width;\n\n transform: translateX(-50%) translateY(-50%) rotate(-45deg);\n }\n }\n }\n\n &--small {\n gap: spacing.space(0.5);\n }\n\n &--small &__item {\n &-label {\n padding-left: spacing.space(2.25);\n\n line-height: 1.5rem;\n\n &::before {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n &::after {\n width: 0.825rem;\n height: 0.375rem;\n margin-top: -0.125rem;\n\n top: 0.75rem;\n left: 0.75rem;\n }\n }\n }\n\n &--inline {\n flex-flow: row wrap;\n\n align-items: center;\n gap: spacing.space(1) spacing.space(2);\n\n @include media.on-tiny {\n flex-direction: column;\n align-items: flex-start;\n }\n }\n\n &__item-label:active {\n &::before {\n @include a11y.focus-outline;\n @include a11y.active-outline;\n }\n }\n\n input:focus + &__item-label {\n &::before {\n @include a11y.focus-outline;\n }\n }\n\n input:checked + &__item-label {\n &::before {\n @include colour.colour-background(\"input-foreground\");\n }\n\n &::after {\n display: block;\n }\n }\n\n input:focus + &__item-label,\n &__item:hover &__item-label {\n &::before {\n box-shadow: 0 0 0 0.125rem var(--input-border);\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n media.$largest-medium-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-medium-device-em: #{math.div(\n media.$largest-medium-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-medium-device-em: #{math.div(\n media.$largest-small-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-small-device-em: #{math.div(\n media.$largest-small-device-px,\n typography.$relative-1rem-px\n )}em;\n$smallest-small-device-em: #{math.div(\n media.$largest-tiny-device-px + 1,\n typography.$relative-1rem-px\n )}em;\n$largest-tiny-device-em: #{math.div(\n media.$largest-tiny-device-px,\n typography.$relative-1rem-px\n )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n @media #{$media-large} {\n @content;\n }\n}\n\n@mixin on-medium() {\n @media #{$media-medium} {\n @content;\n }\n}\n\n@mixin on-small() {\n @media #{$media-small} {\n @content;\n }\n}\n\n@mixin on-tiny() {\n @media #{$media-tiny} {\n @content;\n }\n}\n\n@mixin on-larger-than-mobile() {\n @media #{$media-gt-mobile} {\n @content;\n }\n}\n\n@mixin on-larger-than-tiny() {\n @media #{$media-gt-tiny} {\n @content;\n }\n}\n\n@mixin on-smaller-than-large() {\n @media #{$media-lt-large} {\n @content;\n }\n}\n\n@mixin on-mobile() {\n @media #{$media-mobile} {\n @content;\n }\n}\n\n@mixin on-print() {\n @media print {\n @content;\n }\n}\n","@use \"../variables/a11y\";\n@use \"colour\";\n\n@mixin focus-outline-without-offset {\n @include colour.colour-outline(\n \"focus-outline\",\n a11y.$focus-outline-width,\n solid\n );\n}\n\n@mixin focus-outline {\n @include focus-outline-without-offset;\n outline-offset: a11y.$focus-outline-offset;\n}\n\n@mixin active-outline {\n outline-offset: 0;\n}\n\n@mixin no-focus-outline-on-click {\n .tna-template--clicked &:focus {\n outline: none;\n }\n}\n","$focus-outline-width: 5px !default;\n$focus-outline-offset: 2px !default;\n$focus-outline-padding: $focus-outline-width + $focus-outline-offset;\n"]}

package/nationalarchives/components/compound-filters/compound-filters.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/compound-filters/compound-filters.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AAqMA,4EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA5JA,4CAJA,gCCzCF,sBACE,gBAEA,kCACE,aCVJ,sBAGE,aACA,eACA,mBACA,aAEA,gBAEA,4BACE,qBAEA,aACA,mBACA,QAEA,iBAEA,mBCjBF,eH2EI,wDEpDF,oCACE,gBACA,eAEA,gBAEA,YACA,gBAIJ,4BACE,aACA,cAEA,kBAEA,YACA,cAEA,qBAEA,mBAEA,uEAEE,WAEA,YACA,iBAEA,cAEA,kBACA,WACA,SFOA,gDEFF,oCACE,wBAGF,mCACE","file":"compound-filters.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-list-marker: var(--font-base);\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n // --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-compound-filters {\n @include spacing.space-above;\n\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: spacing.space(0.5) spacing.space(0.75);\n\n list-style: none;\n\n &__item {\n padding: 0 spacing.space(0.125) 0 spacing.space(0.75);\n\n display: flex;\n align-items: center;\n gap: spacing.space(0.5);\n\n line-height: 1.75;\n\n border-radius: 1rem;\n\n @include typography.font-size(16);\n\n @include colour.colour-border(\"keyline\", 1px);\n\n &--remove {\n padding-right: 0;\n padding-left: 0;\n\n background: none;\n\n border: none;\n border-radius: 0;\n }\n }\n\n &__link {\n width: 1.5rem;\n height: 1.5rem;\n\n position: relative;\n\n font-size: 0;\n line-height: 0;\n\n text-decoration: none;\n\n border-radius: 100%;\n\n &::before,\n &::after {\n content: \"\";\n\n height: 1rem;\n margin-left: -1px;\n\n display: block;\n\n position: absolute;\n top: 0.25rem;\n left: 50%;\n\n @include colour.colour-border(\"font-base\", 2px, solid, left);\n }\n\n &::before {\n transform: rotate(45deg);\n }\n\n &::after {\n transform: rotate(-45deg);\n }\n\n &:hover,\n &:focus-visible {\n @include colour.contrast;\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/compound-filters/compound-filters.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AAsMA,4EACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA7JA,4CAJA,gCCzCF,sBACE,gBAEA,kCACE,aCVJ,sBAGE,aACA,eACA,mBACA,aAEA,gBAEA,4BACE,qBAEA,aACA,mBACA,QAEA,iBAEA,mBCjBF,eH4EI,wDErDF,oCACE,gBACA,eAEA,gBAEA,YACA,gBAIJ,4BACE,aACA,cAEA,kBAEA,YACA,cAEA,qBAEA,mBAEA,uEAEE,WAEA,YACA,iBAEA,cAEA,kBACA,WACA,SFQA,gDEHF,oCACE,wBAGF,mCACE","file":"compound-filters.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-list-marker: var(--font-base);\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n // --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n@function space($size) {\n @return #{$size * spacing.$spacing-unit-px}px;\n}\n\n%space-above {\n margin-top: space(2);\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-compound-filters {\n @include spacing.space-above;\n\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: spacing.space(0.5) spacing.space(0.75);\n\n list-style: none;\n\n &__item {\n padding: 0 spacing.space(0.125) 0 spacing.space(0.75);\n\n display: flex;\n align-items: center;\n gap: spacing.space(0.5);\n\n line-height: 1.75;\n\n border-radius: 1rem;\n\n @include typography.font-size(16);\n\n @include colour.colour-border(\"keyline\", 1px);\n\n &--remove {\n padding-right: 0;\n padding-left: 0;\n\n background: none;\n\n border: none;\n border-radius: 0;\n }\n }\n\n &__link {\n width: 1.5rem;\n height: 1.5rem;\n\n position: relative;\n\n font-size: 0;\n line-height: 0;\n\n text-decoration: none;\n\n border-radius: 100%;\n\n &::before,\n &::after {\n content: \"\";\n\n height: 1rem;\n margin-left: -1px;\n\n display: block;\n\n position: absolute;\n top: 0.25rem;\n left: 50%;\n\n @include colour.colour-border(\"font-base\", 2px, solid, left);\n }\n\n &::before {\n transform: rotate(45deg);\n }\n\n &::after {\n transform: rotate(-45deg);\n }\n\n &:hover,\n &:focus-visible {\n @include colour.contrast;\n }\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n"]}

package/nationalarchives/components/cookie-banner/cookie-banner.js CHANGED Viewed

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,(()=>(()=>{"use strict";var e={169:(e,t,i)=>{function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}function o(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,n)}return i}function r(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?o(Object(i),!0).forEach((function(t){h(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):o(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function s(e){return function(e){if(Array.isArray(e))return c(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return c(e,t);var i={}.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?c(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=Array(t);i<t;i++)n[i]=e[i];return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,f(n.key),n)}}function l(e,t,i){return t&&u(e.prototype,t),i&&u(e,i),Object.defineProperty(e,"prototype",{writable:!1}),e}function h(e,t,i){return(t=f(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function f(e){var t=function(e){if("object"!=n(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,"string");if("object"!=n(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==n(t)?t:t+""}i.d(t,{A:()=>v}),window.TNAFrontendCookies=window.TNAFrontendCookies||null,window.TNAFrontendCookieEvents=window.TNAFrontendCookieEvents||null;var d=function(){return l((function e(){if(a(this,e),h(this,"events",{}),h(this,"oneTimeEvents",{}),window.TNAFrontendCookieEvents)return window.TNAFrontendCookieEvents;window.TNAFrontendCookieEvents=this}),[{key:"on",value:function(e,t){Object.hasOwn(this.events,e)||(this.events[e]=[]),this.events[e]=[].concat(s(this.events[e]),[t])}},{key:"once",value:function(e,t){Object.hasOwn(this.oneTimeEvents,e)||(this.oneTimeEvents[e]=[]),this.oneTimeEvents[e]=[].concat(s(this.oneTimeEvents[e]),[t])}},{key:"trigger",value:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(Object.hasOwn(this.events,e)&&this.events[e].forEach((function(e){return e.call(t,i)})),Object.hasOwn(this.oneTimeEvents,e))for(var n=this.oneTimeEvents[e].length-1;n>=0;n--)this.oneTimeEvents[e][n].call(this,i),this.oneTimeEvents[e].splice(n,1)}}])}(),v=function(){return l((function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a(this,e),h(this,"extraPolicies",[]),h(this,"domain",""),h(this,"path",""),h(this,"secure",!0),h(this,"policiesKey",""),h(this,"events",null),h(this,"defaultAge",null);var i=t.extraPolicies,n=void 0===i?[]:i,o=t.domain,r=void 0===o?"":o,s=t.path,c=void 0===s?"/":s,u=t.secure,l=void 0===u||u,f=t.policiesKey,v=void 0===f?"cookies_policy":f,p=t.newInstance,y=void 0!==p&&p,m=t.defaultAge,b=void 0===m?31536e3:m;if(y)this.destroyInstance();else if(window.TNAFrontendCookies)return window.TNAFrontendCookies;this.extraPolicies=n,this.domain=r,this.path=c,this.secure=l,this.policiesKey=v,this.defaultAge=b,this.events=new d,this.init(),window.TNAFrontendCookies=this}),[{key:"init",value:function(){this.savePolicies(r(r(r({},Object.fromEntries(this.extraPolicies.map((function(e){return[e.toLowerCase(),!1]})))),{},{usage:!1,settings:!1},this.policies),{},{essential:!0}))}},{key:"destroyInstance",value:function(){window.TNAFrontendCookies=null}},{key:"all",get:function(){var e={};return document.cookie.split("; ").filter((function(e){return e})).forEach((function(t){var i=t.trim().split("=");i[0]&&(e[i[0]]=i[1])})),e}},{key:"policies",get:function(){try{return JSON.parse(this.get(this.policiesKey)||"{}")}catch(e){return{}}}},{key:"exists",value:function(e){return Object.hasOwn(this.all,e)}},{key:"hasValue",value:function(e,t){return this.get(e)==t}},{key:"get",value:function(e){return this.exists(e)?decodeURIComponent(this.all[e]):null}},{key:"set",value:function(e,t){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n=i.maxAge,o=void 0===n?this.defaultAge:n,r=i.sameSite,s=void 0===r?"Lax":r,c=i.domain,a=void 0===c?this.domain:c,u=i.path,l=void 0===u?this.path:u,h=i.secure,f=void 0===h?this.secure:h,d=i.session,v=void 0!==d&&d;if(e){var p="".concat(encodeURIComponent(e),"=").concat(encodeURIComponent(t),";").concat(a?" domain=".concat(a,"; "):""," samesite=").concat(s,"; path=").concat(l).concat(v?"":"; max-age=".concat(o)).concat(f?"; secure":"");document.cookie=p,this.events.trigger("setCookie",{key:e,value:t,maxAge:o,path:l,sameSite:s,domain:a,secure:f,session:v,cookie:p})}}},{key:"delete",value:function(e){var t={maxAge:-1,path:arguments.length>1&&void 0!==arguments[1]?arguments[1]:"/",domain:(arguments.length>2&&void 0!==arguments[2]?arguments[2]:null)||void 0};this.set(e,"",t),this.events.trigger("deleteCookie",r({key:e},t))}},{key:"deleteAll",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"/",i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;Object.keys(this.all).forEach((function(n){e.delete(n,t,i)})),this.events.trigger("deleteAllCookies",{path:t,domain:i})}},{key:"acceptPolicy",value:function(e){this.setPolicy(e,!0),this.events.trigger("acceptPolicy",e),this.events.trigger("changePolicy",h({},e,!0))}},{key:"rejectPolicy",value:function(e){this.setPolicy(e,!1),this.events.trigger("rejectPolicy",e),this.events.trigger("changePolicy",h({},e,!1))}},{key:"setPolicy",value:function(e,t){"essential"!==e&&(this.savePolicies(r(r({},this.policies),{},h(h({},e,t),"essential",!0))),this.events.trigger("changePolicy",h({},e,t)))}},{key:"acceptAllPolicies",value:function(){var e=Object.fromEntries(Object.keys(this.policies).map((function(e){return[e.toLowerCase(),!0]})));this.savePolicies(e),this.events.trigger("acceptAllPolicies"),this.events.trigger("changePolicy",e)}},{key:"rejectAllPolicies",value:function(){var e=r(r({},Object.fromEntries(Object.keys(this.policies).map((function(e){return[e.toLowerCase(),!1]})))),{},{essential:!0});this.savePolicies(e),this.events.trigger("rejectAllPolicies"),this.events.trigger("changePolicy",e)}},{key:"savePolicies",value:function(e){this.set(this.policiesKey,JSON.stringify(e),{maxAge:31536e3})}},{key:"isPolicyAccepted",value:function(e){return Object.hasOwn(this.policies,e)?!0===this.policies[e]:null}},{key:"on",value:function(e,t){this.events.on(e,t)}},{key:"once",value:function(e,t){this.events.once(e,t)}}])}()}},t={};function i(n){var o=t[n];if(void 0!==o)return o.exports;var r=t[n]={exports:{}};return e[n](r,r.exports,i),r.exports}i.d=(e,t)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};i.r(n),i.d(n,{CookieBanner:()=>a,Cookies:()=>o.A});var o=i(169);function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function s(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,c(n.key),n)}}function c(e){var t=function(e){if("object"!=r(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,"string");if("object"!=r(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==r(t)?t:t+""}var a=function(){return e=function e(t){var i=this;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.$acceptButton=t&&t.querySelector('[value="accept"]'),this.$rejectButton=t&&t.querySelector('[value="reject"]'),this.$prompt=t&&t.querySelector(".tna-cookie-banner__message--prompt"),this.$acceptedMessage=t&&t.querySelector(".tna-cookie-banner__message--accepted"),this.$rejectedMessage=t&&t.querySelector(".tna-cookie-banner__message--rejected"),this.$closeButtons=t&&t.querySelectorAll('[value="close"]'),this.$module&&this.$acceptButton&&this.$rejectButton&&this.$prompt&&this.$acceptedMessage&&this.$rejectedMessage&&this.$closeButtons){var n=(this.$module.getAttribute("data-policies")||"").split(",").filter((function(e){return e})).map((function(e){return e.trim()})),r=this.$module.getAttribute("data-domain")||void 0,s=this.$module.getAttribute("data-path")||void 0,c=this.$module.getAttribute("data-secure")||void 0,a=this.$module.getAttribute("data-policieskey")||void 0;this.cookies=new o.A({extraPolicies:n,domain:r,path:s,secure:c,policiesKey:a,newInstance:!0}),this.cookiePreferencesSet=this.$module.getAttribute("data-preferenceskey")||"cookie_preferences_set",this.cookies.hasValue(this.cookiePreferencesSet,"true")||(this.$module.removeAttribute("hidden"),this.$acceptButton.addEventListener("click",(function(){return i.accept()})),this.$rejectButton.addEventListener("click",(function(){return i.reject()})))}},(t=[{key:"accept",value:function(){this.$prompt.setAttribute("hidden",!0),this.complete(),this.$acceptedMessage.removeAttribute("hidden"),this.$acceptedMessage.focus(),this.$acceptedMessage.setAttribute("tabindex","-1"),this.cookies.acceptAllPolicies()}},{key:"reject",value:function(){this.$prompt.setAttribute("hidden",!0),this.complete(),this.$rejectedMessage.removeAttribute("hidden"),this.$rejectedMessage.focus(),this.$rejectedMessage.setAttribute("tabindex","-1"),this.cookies.rejectAllPolicies()}},{key:"complete",value:function(){var e=this;this.cookies.set(this.cookiePreferencesSet,!0),this.$closeButtons.forEach((function(t){t.addEventListener("click",(function(){return e.close()}))}))}},{key:"close",value:function(){this.$module.setAttribute("hidden",!0)}}])&&s(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}();return n})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("TNAFrontend",[],t):"object"==typeof exports?exports.TNAFrontend=t():e.TNAFrontend=t()}(self,(()=>(()=>{"use strict";var e={169:(e,t,i)=>{function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}function o(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,n)}return i}function r(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?o(Object(i),!0).forEach((function(t){h(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):o(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function s(e){return function(e){if(Array.isArray(e))return c(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return c(e,t);var i={}.toString.call(e).slice(8,-1);return"Object"===i&&e.constructor&&(i=e.constructor.name),"Map"===i||"Set"===i?Array.from(e):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?c(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=Array(t);i<t;i++)n[i]=e[i];return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,f(n.key),n)}}function l(e,t,i){return t&&u(e.prototype,t),i&&u(e,i),Object.defineProperty(e,"prototype",{writable:!1}),e}function h(e,t,i){return(t=f(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function f(e){var t=function(e){if("object"!=n(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,"string");if("object"!=n(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==n(t)?t:t+""}i.d(t,{A:()=>v}),window.TNAFrontendCookies=window.TNAFrontendCookies||null,window.TNAFrontendCookieEvents=window.TNAFrontendCookieEvents||null;var d=function(){return l((function e(){if(a(this,e),h(this,"events",{}),h(this,"oneTimeEvents",{}),window.TNAFrontendCookieEvents)return window.TNAFrontendCookieEvents;window.TNAFrontendCookieEvents=this}),[{key:"on",value:function(e,t){Object.hasOwn(this.events,e)||(this.events[e]=[]),this.events[e]=[].concat(s(this.events[e]),[t])}},{key:"once",value:function(e,t){Object.hasOwn(this.oneTimeEvents,e)||(this.oneTimeEvents[e]=[]),this.oneTimeEvents[e]=[].concat(s(this.oneTimeEvents[e]),[t])}},{key:"trigger",value:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(Object.hasOwn(this.events,e)&&this.events[e].forEach((function(e){return e.call(t,i)})),Object.hasOwn(this.oneTimeEvents,e))for(var n=this.oneTimeEvents[e].length-1;n>=0;n--)this.oneTimeEvents[e][n].call(this,i),this.oneTimeEvents[e].splice(n,1)}}])}(),v=function(){return l((function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a(this,e),h(this,"extraPolicies",[]),h(this,"domain",""),h(this,"path",""),h(this,"secure",!0),h(this,"policiesKey",""),h(this,"events",null),h(this,"defaultAge",null);var i=t.extraPolicies,n=void 0===i?[]:i,o=t.domain,r=void 0===o?null:o,s=t.path,c=void 0===s?null:s,u=t.secure,l=void 0===u||u,f=t.policiesKey,v=void 0===f?"cookies_policy":f,p=t.newInstance,y=void 0!==p&&p,m=t.defaultAge,b=void 0===m?31536e3:m;if(y)this.destroyInstance();else if(window.TNAFrontendCookies)return window.TNAFrontendCookies;this.extraPolicies=n,this.domain=null===r?document.documentElement.getAttribute("data-tnacookiesdomain")||"":r,this.path=null===c?document.documentElement.getAttribute("data-tnacookiespath")||"/":c,this.secure=l,this.policiesKey=v,this.defaultAge=b,this.events=new d,this.init(),window.TNAFrontendCookies=this}),[{key:"init",value:function(){this.savePolicies(r(r(r({},Object.fromEntries(this.extraPolicies.map((function(e){return[e.toLowerCase(),!1]})))),{},{usage:!1,settings:!1,marketing:!1},this.policies),{},{essential:!0}))}},{key:"destroyInstance",value:function(){window.TNAFrontendCookies=null}},{key:"all",get:function(){var e={};return document.cookie.split("; ").filter((function(e){return e})).forEach((function(t){var i=t.trim().split("=");i[0]&&(e[i[0]]=i[1])})),e}},{key:"policies",get:function(){try{return JSON.parse(this.get(this.policiesKey)||"{}")}catch(e){return{}}}},{key:"exists",value:function(e){return Object.hasOwn(this.all,e)}},{key:"hasValue",value:function(e,t){return this.get(e)==t}},{key:"get",value:function(e){return this.exists(e)?decodeURIComponent(this.all[e]):null}},{key:"set",value:function(e,t){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n=i.maxAge,o=void 0===n?this.defaultAge:n,r=i.sameSite,s=void 0===r?"Lax":r,c=i.domain,a=void 0===c?this.domain:c,u=i.path,l=void 0===u?this.path:u,h=i.secure,f=void 0===h?this.secure:h,d=i.session,v=void 0!==d&&d;if(e){var p="".concat(encodeURIComponent(e),"=").concat(encodeURIComponent(t),";").concat(a?" domain=".concat(a,"; "):""," samesite=").concat(s,"; path=").concat(l).concat(v?"":"; max-age=".concat(o)).concat(f?"; secure":"");document.cookie=p,this.events.trigger("setCookie",{key:e,value:t,maxAge:o,path:l,sameSite:s,domain:a,secure:f,session:v,cookie:p})}}},{key:"delete",value:function(e){var t={maxAge:-1,path:arguments.length>1&&void 0!==arguments[1]?arguments[1]:"/",domain:(arguments.length>2&&void 0!==arguments[2]?arguments[2]:null)||void 0};this.set(e,"",t),this.events.trigger("deleteCookie",r({key:e},t))}},{key:"deleteAll",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"/",i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;Object.keys(this.all).forEach((function(n){e.delete(n,t,i)})),this.events.trigger("deleteAllCookies",{path:t,domain:i})}},{key:"acceptPolicy",value:function(e){this.setPolicy(e,!0),this.events.trigger("acceptPolicy",e),this.events.trigger("changePolicy",h({},e,!0))}},{key:"rejectPolicy",value:function(e){this.setPolicy(e,!1),this.events.trigger("rejectPolicy",e),this.events.trigger("changePolicy",h({},e,!1))}},{key:"setPolicy",value:function(e,t){"essential"!==e&&(this.savePolicies(r(r({},this.policies),{},h(h({},e,t),"essential",!0))),this.events.trigger("changePolicy",h({},e,t)))}},{key:"acceptAllPolicies",value:function(){var e=Object.fromEntries(Object.keys(this.policies).map((function(e){return[e.toLowerCase(),!0]})));this.savePolicies(e),this.events.trigger("acceptAllPolicies"),this.events.trigger("changePolicy",e)}},{key:"rejectAllPolicies",value:function(){var e=r(r({},Object.fromEntries(Object.keys(this.policies).map((function(e){return[e.toLowerCase(),!1]})))),{},{essential:!0});this.savePolicies(e),this.events.trigger("rejectAllPolicies"),this.events.trigger("changePolicy",e)}},{key:"savePolicies",value:function(e){this.set(this.policiesKey,JSON.stringify(e),{maxAge:31536e3})}},{key:"isPolicyAccepted",value:function(e){return Object.hasOwn(this.policies,e)?!0===this.policies[e]:null}},{key:"on",value:function(e,t){this.events.on(e,t)}},{key:"once",value:function(e,t){this.events.once(e,t)}}])}()}},t={};function i(n){var o=t[n];if(void 0!==o)return o.exports;var r=t[n]={exports:{}};return e[n](r,r.exports,i),r.exports}i.d=(e,t)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};i.r(n),i.d(n,{CookieBanner:()=>a,Cookies:()=>o.A});var o=i(169);function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function s(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,c(n.key),n)}}function c(e){var t=function(e){if("object"!=r(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,"string");if("object"!=r(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==r(t)?t:t+""}var a=function(){return e=function e(t){var i=this;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=t,this.$acceptButton=t&&t.querySelector('[value="accept"]'),this.$rejectButton=t&&t.querySelector('[value="reject"]'),this.$prompt=t&&t.querySelector(".tna-cookie-banner__message--prompt"),this.$acceptedMessage=t&&t.querySelector(".tna-cookie-banner__message--accepted"),this.$rejectedMessage=t&&t.querySelector(".tna-cookie-banner__message--rejected"),this.$closeButtons=t&&t.querySelectorAll('[value="close"]'),this.$module&&this.$acceptButton&&this.$rejectButton&&this.$prompt&&this.$acceptedMessage&&this.$rejectedMessage&&this.$closeButtons){var n=(this.$module.getAttribute("data-policies")||"").split(",").filter((function(e){return e})).map((function(e){return e.trim()})),r=this.$module.getAttribute("data-domain")||void 0,s=this.$module.getAttribute("data-path")||void 0,c=this.$module.getAttribute("data-secure")||void 0,a=this.$module.getAttribute("data-policieskey")||void 0;this.cookies=new o.A({extraPolicies:n,domain:r,path:s,secure:c,policiesKey:a,newInstance:!0}),this.cookiePreferencesSet=this.$module.getAttribute("data-preferenceskey")||"cookie_preferences_set",this.cookies.hasValue(this.cookiePreferencesSet,"true")||(this.$module.removeAttribute("hidden"),this.$acceptButton.addEventListener("click",(function(){return i.accept()})),this.$rejectButton.addEventListener("click",(function(){return i.reject()})))}},(t=[{key:"accept",value:function(){this.$prompt.setAttribute("hidden",!0),this.complete(),this.$acceptedMessage.removeAttribute("hidden"),this.$acceptedMessage.focus(),this.$acceptedMessage.setAttribute("tabindex","-1"),this.cookies.acceptAllPolicies()}},{key:"reject",value:function(){this.$prompt.setAttribute("hidden",!0),this.complete(),this.$rejectedMessage.removeAttribute("hidden"),this.$rejectedMessage.focus(),this.$rejectedMessage.setAttribute("tabindex","-1"),this.cookies.rejectAllPolicies()}},{key:"complete",value:function(){var e=this;this.cookies.set(this.cookiePreferencesSet,!0),this.$closeButtons.forEach((function(t){t.addEventListener("click",(function(){return e.close()}))}))}},{key:"close",value:function(){this.$module.setAttribute("hidden",!0)}}])&&s(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,t}();return n})()));
 //# sourceMappingURL=cookie-banner.js.map

package/nationalarchives/components/cookie-banner/cookie-banner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components/cookie-banner/cookie-banner.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/cookies.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/cookie-banner/cookie-banner.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","window.TNAFrontendCookies = window.TNAFrontendCookies \|\| null;\nwindow.TNAFrontendCookieEvents = window.TNAFrontendCookieEvents \|\| null;\n\nexport class CookieEventHandler {\n events = {};\n oneTimeEvents = {};\n\n constructor() {\n if (window.TNAFrontendCookieEvents) {\n return window.TNAFrontendCookieEvents;\n }\n window.TNAFrontendCookieEvents = this;\n }\n\n /*\n Add an event listener.\n * @param {String} event - The event to add a listener for.\n * @param {Function} callback - The callback function to call when the event is triggered.\n /\n on(event, callback) {\n if (!Object.hasOwn(this.events, event)) {\n this.events[event] = [];\n }\n this.events[event] = [...this.events[event], callback];\n }\n\n once(event, callback) {\n if (!Object.hasOwn(this.oneTimeEvents, event)) {\n this.oneTimeEvents[event] = [];\n }\n this.oneTimeEvents[event] = [...this.oneTimeEvents[event], callback];\n }\n\n /* @protected /\n trigger(event, data = {}) {\n if (Object.hasOwn(this.events, event)) {\n this.events[event].forEach((eventToTrigger) =>\n eventToTrigger.call(this, data),\n );\n }\n if (Object.hasOwn(this.oneTimeEvents, event)) {\n for (let i = this.oneTimeEvents[event].length - 1; i >= 0; i--) {\n const eventToTrigger = this.oneTimeEvents[event][i];\n eventToTrigger.call(this, data);\n this.oneTimeEvents[event].splice(i, 1);\n }\n }\n }\n}\n\n/\n Class to handle cookies.\n * @class Cookies\n * @constructor\n * @public\n /\nexport default class Cookies {\n /* @protected /\n extraPolicies = [];\n /* @protected /\n domain = \"\";\n /* @protected /\n path = \"\";\n /* @protected /\n secure = true;\n /* @protected /\n policiesKey = \"\";\n /* @protected /\n events = null;\n /* @protected /\n defaultAge = null;\n\n /\n Create a cookie handler.\n * @param {String} [options.extraPolicies=[]] - The extra cookie policies to manage in addition to essential, settings and usage.\n * @param {String} [options.domain=\"\"] - The domain to register the cookie with.\n * @param {String} [options.path=\"\"] - The domain to register the cookie with.\n * @param {String} [options.secure=true] - Only set cookie in HTTPS environments.\n * @param {String} [options.policiesKey=\"cookies_policy\"] - The name of the cookie.\n * @param {String} [options.newInstance=false] - Create a fresh instance of the cookie class.\n * @param {String} [options.defaultAge=31536000] - The default age of non-session cookies.\n /\n constructor(options = {}) {\n const {\n extraPolicies = [],\n domain = \"\",\n path = \"/\",\n secure = true,\n policiesKey = \"cookies_policy\",\n newInstance = false,\n defaultAge = 31536000, // 365 days\n } = options;\n if (newInstance) {\n this.destroyInstance();\n } else if (window.TNAFrontendCookies) {\n return window.TNAFrontendCookies;\n }\n this.extraPolicies = extraPolicies;\n this.domain = domain;\n this.path = path;\n this.secure = secure;\n this.policiesKey = policiesKey;\n this.defaultAge = defaultAge;\n this.events = new CookieEventHandler();\n this.init();\n window.TNAFrontendCookies = this;\n }\n\n /* @protected /\n init() {\n this.savePolicies({\n ...Object.fromEntries(\n this.extraPolicies.map((k) => [k.toLowerCase(), false]),\n ),\n usage: false,\n settings: false,\n ...this.policies,\n essential: true,\n });\n }\n\n destroyInstance() {\n window.TNAFrontendCookies = null;\n }\n\n /* @protected /\n get all() {\n const deserialised = {};\n document.cookie\n .split(\"; \")\n .filter((x) => x)\n .forEach((cookie) => {\n const parts = cookie.trim().split(\"=\");\n if (parts[0]) {\n deserialised[parts[0]] = parts[1];\n }\n });\n return deserialised;\n }\n\n /* @protected /\n get policies() {\n try {\n return JSON.parse(this.get(this.policiesKey) \|\| \"{}\");\n } catch (e) {\n return {};\n }\n }\n\n /\n Check to see whether a cookie exists or not.\n * @param {String} key - The cookie name.\n * @returns {Boolean}\n /\n exists(key) {\n return Object.hasOwn(this.all, key);\n }\n\n /\n Check to see whether a cookie has a particular value.\n * @param {String} key - The cookie name.\n * @param {String\|Number\|Boolean} value - The value to check against.\n * @returns\n /\n hasValue(key, value) {\n return this.get(key) == value;\n }\n\n /\n Get a cookie.\n * @param {String} key - The cookie name.\n * @returns {String\|Number\|Boolean}\n /\n get(key) {\n return this.exists(key) ? decodeURIComponent(this.all[key]) : null;\n }\n\n /\n Set a cookie.\n * @param {String} key - The cookie name.\n * @param {String\|Number\|Boolean} value - The cookie value.\n * @param {Object} options\n * @param {Number} [options.maxAge=this.defaultAge] - The maximum age of the cookie in seconds.\n * @param {String} [options.path=/] - The path to register the cookie for.\n * @param {String} [options.sameSite=Lax] - The sameSite attribute.\n * @param {String} [options.domain=this.domain] - The domain to register the cookie with.\n * @param {String} [options.path=this.path] - The path to register the cookie with.\n * @param {String} [options.secure=this.secure] - Only set cookie in HTTPS environments.\n * @param {String} [options.session=false] - Set a session cookie.\n /\n set(key, value, options = {}) {\n const {\n maxAge = this.defaultAge,\n sameSite = \"Lax\",\n domain = this.domain,\n path = this.path,\n secure = this.secure,\n session = false,\n } = options;\n if (!key) {\n return;\n }\n const cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)};${\n domain ? ` domain=${domain}; ` : \"\"\n } samesite=${sameSite}; path=${path}${!session ? `; max-age=${maxAge}` : \"\"}${\n secure ? \"; secure\" : \"\"\n }`;\n document.cookie = cookie;\n this.events.trigger(\"setCookie\", {\n key,\n value,\n maxAge,\n path,\n sameSite,\n domain,\n secure,\n session,\n cookie,\n });\n }\n\n /\n Delete a cookie.\n * @param {String} key - The cookie name.\n * @param {String} [path=/] - The path to the cookie is registered on.\n /\n delete(key, path = \"/\", domain = null) {\n const options = { maxAge: -1, path, domain: domain \|\| undefined };\n this.set(key, \"\", options);\n this.events.trigger(\"deleteCookie\", { key, ...options });\n }\n\n /\n Delete all cookies.\n /\n deleteAll(path = \"/\", domain = null) {\n Object.keys(this.all).forEach((cookie) => {\n this.delete(cookie, path, domain);\n });\n this.events.trigger(\"deleteAllCookies\", { path, domain });\n }\n\n /\n Accept a policy.\n * @param {String} policy - The name of the policy.\n /\n acceptPolicy(policy) {\n this.setPolicy(policy, true);\n this.events.trigger(\"acceptPolicy\", policy);\n this.events.trigger(\"changePolicy\", { [policy]: true });\n }\n\n /\n Reject a policy.\n * @param {String} policy - The name of the policy.\n /\n rejectPolicy(policy) {\n this.setPolicy(policy, false);\n this.events.trigger(\"rejectPolicy\", policy);\n this.events.trigger(\"changePolicy\", { [policy]: false });\n }\n\n /\n Set a policy.\n * @param {String} policy - The name of the policy.\n * @param {Boolean} accepted - Whether the policy is accepted or not.\n /\n setPolicy(policy, accepted) {\n if (policy === \"essential\") {\n return;\n }\n this.savePolicies({\n ...this.policies,\n [policy]: accepted,\n essential: true,\n });\n this.events.trigger(\"changePolicy\", { [policy]: accepted });\n }\n\n /\n Accept all the cookie policies.\n /\n acceptAllPolicies() {\n const allPolicies = Object.fromEntries(\n Object.keys(this.policies).map((k) => [k.toLowerCase(), true]),\n );\n this.savePolicies(allPolicies);\n this.events.trigger(\"acceptAllPolicies\");\n this.events.trigger(\"changePolicy\", allPolicies);\n }\n\n /\n Reject all the cookie policies.\n /\n rejectAllPolicies() {\n const allPolicies = {\n ...Object.fromEntries(\n Object.keys(this.policies).map((k) => [k.toLowerCase(), false]),\n ),\n essential: true,\n };\n this.savePolicies(allPolicies);\n this.events.trigger(\"rejectAllPolicies\");\n this.events.trigger(\"changePolicy\", allPolicies);\n }\n\n /\n Commit policy preferences to the browser.\n * @param {object} policies - The policies to commit.\n /\n savePolicies(policies) {\n this.set(this.policiesKey, JSON.stringify(policies), {\n maxAge: 60 60 * 24 * 365,\n });\n }\n\n /*\n Get the acceptance status of a policy.\n * @param {String} policy - The name of the policy.\n * @returns {Boolean}\n /\n isPolicyAccepted(policy) {\n return Object.hasOwn(this.policies, policy)\n ? this.policies[policy] === true\n : null;\n }\n\n /\n Add an event listener.\n * @param {String} event - The event to add a listener for.\n * @param {Function} callback - The callback function to call when the event is triggered.\n /\n on(event, callback) {\n this.events.on(event, callback);\n }\n\n /\n Add a one-time event listener.\n * @param {String} event - The event to add a listener for.\n * @param {Function} callback - The callback function to call when the event is triggered.\n */\n once(event, callback) {\n this.events.once(event, callback);\n }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import Cookies from \"../../lib/cookies.mjs\";\n\nexport { Cookies };\n\nexport class CookieBanner {\n constructor($module) {\n this.$module = $module;\n this.$acceptButton = $module && $module.querySelector('[value=\"accept\"]');\n this.$rejectButton = $module && $module.querySelector('[value=\"reject\"]');\n this.$prompt =\n $module && $module.querySelector(\".tna-cookie-banner__message--prompt\");\n this.$acceptedMessage =\n $module && $module.querySelector(\".tna-cookie-banner__message--accepted\");\n this.$rejectedMessage =\n $module && $module.querySelector(\".tna-cookie-banner__message--rejected\");\n this.$closeButtons = $module && $module.querySelectorAll('[value=\"close\"]');\n\n if (\n !this.$module \|\|\n !this.$acceptButton \|\|\n !this.$rejectButton \|\|\n !this.$prompt \|\|\n !this.$acceptedMessage \|\|\n !this.$rejectedMessage \|\|\n !this.$closeButtons\n ) {\n return;\n }\n\n const policies = this.$module.getAttribute(\"data-policies\") \|\| \"\";\n const extraPolicies = policies\n .split(\",\")\n .filter((x) => x)\n .map((policy) => policy.trim());\n const domain = this.$module.getAttribute(\"data-domain\") \|\| undefined;\n const path = this.$module.getAttribute(\"data-path\") \|\| undefined;\n const secure = this.$module.getAttribute(\"data-secure\") \|\| undefined;\n const policiesKey =\n this.$module.getAttribute(\"data-policieskey\") \|\| undefined;\n\n this.cookies = new Cookies({\n extraPolicies,\n domain,\n path,\n secure,\n policiesKey,\n newInstance: true,\n });\n\n this.cookiePreferencesSet =\n this.$module.getAttribute(\"data-preferenceskey\") \|\|\n \"cookie_preferences_set\";\n const cookiePreferencesSet = this.cookies.hasValue(\n this.cookiePreferencesSet,\n \"true\",\n );\n\n if (!cookiePreferencesSet) {\n this.$module.removeAttribute(\"hidden\");\n\n this.$acceptButton.addEventListener(\"click\", () => this.accept());\n this.$rejectButton.addEventListener(\"click\", () => this.reject());\n }\n }\n\n accept() {\n this.$prompt.setAttribute(\"hidden\", true);\n this.complete();\n this.$acceptedMessage.removeAttribute(\"hidden\");\n this.$acceptedMessage.focus();\n this.$acceptedMessage.setAttribute(\"tabindex\", \"-1\");\n this.cookies.acceptAllPolicies();\n }\n\n reject() {\n this.$prompt.setAttribute(\"hidden\", true);\n this.complete();\n this.$rejectedMessage.removeAttribute(\"hidden\");\n this.$rejectedMessage.focus();\n this.$rejectedMessage.setAttribute(\"tabindex\", \"-1\");\n this.cookies.rejectAllPolicies();\n }\n\n complete() {\n this.cookies.set(this.cookiePreferencesSet, true);\n this.$closeButtons.forEach(($closeButton) => {\n $closeButton.addEventListener(\"click\", () => this.close());\n });\n }\n\n close() {\n this.$module.setAttribute(\"hidden\", true);\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","window","TNAFrontendCookies","TNAFrontendCookieEvents","CookieEventHandler","_createClass","_classCallCheck","_defineProperty","this","key","value","event","callback","Object","hasOwn","events","concat","_toConsumableArray","oneTimeEvents","_this","data","arguments","length","undefined","forEach","eventToTrigger","call","i","splice","Cookies","options","_options$extraPolicie","extraPolicies","_options$domain","domain","_options$path","path","_options$secure","secure","_options$policiesKey","policiesKey","_options$newInstance","newInstance","_options$defaultAge","defaultAge","destroyInstance","init","savePolicies","_objectSpread","fromEntries","map","k","toLowerCase","usage","settings","policies","essential","get","deserialised","document","cookie","split","filter","x","parts","trim","JSON","parse","e","all","exists","decodeURIComponent","_options$maxAge","maxAge","_options$sameSite","sameSite","_options$domain2","_options$path2","_options$secure2","_options$session","session","encodeURIComponent","trigger","set","_this2","keys","policy","setPolicy","accepted","allPolicies","stringify","on","once","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","__webpack_modules__","d","definition","o","defineProperty","enumerable","obj","prop","prototype","hasOwnProperty","r","Symbol","toStringTag","CookieBanner","$module","$acceptButton","querySelector","$rejectButton","$prompt","$acceptedMessage","$rejectedMessage","$closeButtons","querySelectorAll","getAttribute","cookies","cookiePreferencesSet","hasValue","removeAttribute","addEventListener","accept","reject","setAttribute","complete","focus","acceptAllPolicies","rejectAllPolicies","$closeButton","close"],"sourceRoot":""}
1	+ {"version":3,"file":"components/cookie-banner/cookie-banner.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/cookies.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/cookie-banner/cookie-banner.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","window.TNAFrontendCookies = window.TNAFrontendCookies \|\| null;\nwindow.TNAFrontendCookieEvents = window.TNAFrontendCookieEvents \|\| null;\n\nexport class CookieEventHandler {\n events = {};\n oneTimeEvents = {};\n\n constructor() {\n if (window.TNAFrontendCookieEvents) {\n return window.TNAFrontendCookieEvents;\n }\n window.TNAFrontendCookieEvents = this;\n }\n\n /*\n Add an event listener.\n * @param {String} event - The event to add a listener for.\n * @param {Function} callback - The callback function to call when the event is triggered.\n /\n on(event, callback) {\n if (!Object.hasOwn(this.events, event)) {\n this.events[event] = [];\n }\n this.events[event] = [...this.events[event], callback];\n }\n\n once(event, callback) {\n if (!Object.hasOwn(this.oneTimeEvents, event)) {\n this.oneTimeEvents[event] = [];\n }\n this.oneTimeEvents[event] = [...this.oneTimeEvents[event], callback];\n }\n\n /* @protected /\n trigger(event, data = {}) {\n if (Object.hasOwn(this.events, event)) {\n this.events[event].forEach((eventToTrigger) =>\n eventToTrigger.call(this, data),\n );\n }\n if (Object.hasOwn(this.oneTimeEvents, event)) {\n for (let i = this.oneTimeEvents[event].length - 1; i >= 0; i--) {\n const eventToTrigger = this.oneTimeEvents[event][i];\n eventToTrigger.call(this, data);\n this.oneTimeEvents[event].splice(i, 1);\n }\n }\n }\n}\n\n/\n Class to handle cookies.\n * @class Cookies\n * @constructor\n * @public\n /\nexport default class Cookies {\n /* @protected /\n extraPolicies = [];\n /* @protected /\n domain = \"\";\n /* @protected /\n path = \"\";\n /* @protected /\n secure = true;\n /* @protected /\n policiesKey = \"\";\n /* @protected /\n events = null;\n /* @protected /\n defaultAge = null;\n\n /\n Create a cookie handler.\n * @param {String} [options.extraPolicies=[]] - The extra cookie policies to manage in addition to essential, settings, usage and marketing.\n * @param {String} [options.domain=\"\"] - The domain to register the cookie with.\n * @param {String} [options.path=\"\"] - The domain to register the cookie with.\n * @param {String} [options.secure=true] - Only set cookie in HTTPS environments.\n * @param {String} [options.policiesKey=\"cookies_policy\"] - The name of the cookie.\n * @param {String} [options.newInstance=false] - Create a fresh instance of the cookie class.\n * @param {String} [options.defaultAge=31536000] - The default age of non-session cookies.\n /\n constructor(options = {}) {\n const {\n extraPolicies = [],\n domain = null,\n path = null,\n secure = true,\n policiesKey = \"cookies_policy\",\n newInstance = false,\n defaultAge = 31536000, // 365 days\n } = options;\n if (newInstance) {\n this.destroyInstance();\n } else if (window.TNAFrontendCookies) {\n return window.TNAFrontendCookies;\n }\n this.extraPolicies = extraPolicies;\n if (domain === null) {\n this.domain =\n document.documentElement.getAttribute(\"data-tnacookiesdomain\") \|\| \"\";\n } else {\n this.domain = domain;\n }\n if (path === null) {\n this.path =\n document.documentElement.getAttribute(\"data-tnacookiespath\") \|\| \"/\";\n } else {\n this.path = path;\n }\n this.secure = secure;\n this.policiesKey = policiesKey;\n this.defaultAge = defaultAge;\n this.events = new CookieEventHandler();\n this.init();\n window.TNAFrontendCookies = this;\n }\n\n /* @protected /\n init() {\n this.savePolicies({\n ...Object.fromEntries(\n this.extraPolicies.map((k) => [k.toLowerCase(), false]),\n ),\n usage: false,\n settings: false,\n marketing: false,\n ...this.policies,\n essential: true,\n });\n }\n\n destroyInstance() {\n window.TNAFrontendCookies = null;\n }\n\n /* @protected /\n get all() {\n const deserialised = {};\n document.cookie\n .split(\"; \")\n .filter((x) => x)\n .forEach((cookie) => {\n const parts = cookie.trim().split(\"=\");\n if (parts[0]) {\n deserialised[parts[0]] = parts[1];\n }\n });\n return deserialised;\n }\n\n /* @protected /\n get policies() {\n try {\n return JSON.parse(this.get(this.policiesKey) \|\| \"{}\");\n } catch (e) {\n return {};\n }\n }\n\n /\n Check to see whether a cookie exists or not.\n * @param {String} key - The cookie name.\n * @returns {Boolean}\n /\n exists(key) {\n return Object.hasOwn(this.all, key);\n }\n\n /\n Check to see whether a cookie has a particular value.\n * @param {String} key - The cookie name.\n * @param {String\|Number\|Boolean} value - The value to check against.\n * @returns\n /\n hasValue(key, value) {\n return this.get(key) == value;\n }\n\n /\n Get a cookie.\n * @param {String} key - The cookie name.\n * @returns {String\|Number\|Boolean}\n /\n get(key) {\n return this.exists(key) ? decodeURIComponent(this.all[key]) : null;\n }\n\n /\n Set a cookie.\n * @param {String} key - The cookie name.\n * @param {String\|Number\|Boolean} value - The cookie value.\n * @param {Object} options\n * @param {Number} [options.maxAge=this.defaultAge] - The maximum age of the cookie in seconds.\n * @param {String} [options.path=/] - The path to register the cookie for.\n * @param {String} [options.sameSite=Lax] - The sameSite attribute.\n * @param {String} [options.domain=this.domain] - The domain to register the cookie with.\n * @param {String} [options.path=this.path] - The path to register the cookie with.\n * @param {String} [options.secure=this.secure] - Only set cookie in HTTPS environments.\n * @param {String} [options.session=false] - Set a session cookie.\n /\n set(key, value, options = {}) {\n const {\n maxAge = this.defaultAge,\n sameSite = \"Lax\",\n domain = this.domain,\n path = this.path,\n secure = this.secure,\n session = false,\n } = options;\n if (!key) {\n return;\n }\n const cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)};${\n domain ? ` domain=${domain}; ` : \"\"\n } samesite=${sameSite}; path=${path}${!session ? `; max-age=${maxAge}` : \"\"}${\n secure ? \"; secure\" : \"\"\n }`;\n document.cookie = cookie;\n this.events.trigger(\"setCookie\", {\n key,\n value,\n maxAge,\n path,\n sameSite,\n domain,\n secure,\n session,\n cookie,\n });\n }\n\n /\n Delete a cookie.\n * @param {String} key - The cookie name.\n * @param {String} [path=/] - The path to the cookie is registered on.\n /\n delete(key, path = \"/\", domain = null) {\n const options = { maxAge: -1, path, domain: domain \|\| undefined };\n this.set(key, \"\", options);\n this.events.trigger(\"deleteCookie\", { key, ...options });\n }\n\n /\n Delete all cookies.\n /\n deleteAll(path = \"/\", domain = null) {\n Object.keys(this.all).forEach((cookie) => {\n this.delete(cookie, path, domain);\n });\n this.events.trigger(\"deleteAllCookies\", { path, domain });\n }\n\n /\n Accept a policy.\n * @param {String} policy - The name of the policy.\n /\n acceptPolicy(policy) {\n this.setPolicy(policy, true);\n this.events.trigger(\"acceptPolicy\", policy);\n this.events.trigger(\"changePolicy\", { [policy]: true });\n }\n\n /\n Reject a policy.\n * @param {String} policy - The name of the policy.\n /\n rejectPolicy(policy) {\n this.setPolicy(policy, false);\n this.events.trigger(\"rejectPolicy\", policy);\n this.events.trigger(\"changePolicy\", { [policy]: false });\n }\n\n /\n Set a policy.\n * @param {String} policy - The name of the policy.\n * @param {Boolean} accepted - Whether the policy is accepted or not.\n /\n setPolicy(policy, accepted) {\n if (policy === \"essential\") {\n return;\n }\n this.savePolicies({\n ...this.policies,\n [policy]: accepted,\n essential: true,\n });\n this.events.trigger(\"changePolicy\", { [policy]: accepted });\n }\n\n /\n Accept all the cookie policies.\n /\n acceptAllPolicies() {\n const allPolicies = Object.fromEntries(\n Object.keys(this.policies).map((k) => [k.toLowerCase(), true]),\n );\n this.savePolicies(allPolicies);\n this.events.trigger(\"acceptAllPolicies\");\n this.events.trigger(\"changePolicy\", allPolicies);\n }\n\n /\n Reject all the cookie policies.\n /\n rejectAllPolicies() {\n const allPolicies = {\n ...Object.fromEntries(\n Object.keys(this.policies).map((k) => [k.toLowerCase(), false]),\n ),\n essential: true,\n };\n this.savePolicies(allPolicies);\n this.events.trigger(\"rejectAllPolicies\");\n this.events.trigger(\"changePolicy\", allPolicies);\n }\n\n /\n Commit policy preferences to the browser.\n * @param {object} policies - The policies to commit.\n /\n savePolicies(policies) {\n this.set(this.policiesKey, JSON.stringify(policies), {\n maxAge: 60 60 * 24 * 365,\n });\n }\n\n /*\n Get the acceptance status of a policy.\n * @param {String} policy - The name of the policy.\n * @returns {Boolean}\n /\n isPolicyAccepted(policy) {\n return Object.hasOwn(this.policies, policy)\n ? this.policies[policy] === true\n : null;\n }\n\n /\n Add an event listener.\n * @param {String} event - The event to add a listener for.\n * @param {Function} callback - The callback function to call when the event is triggered.\n /\n on(event, callback) {\n this.events.on(event, callback);\n }\n\n /\n Add a one-time event listener.\n * @param {String} event - The event to add a listener for.\n * @param {Function} callback - The callback function to call when the event is triggered.\n */\n once(event, callback) {\n this.events.once(event, callback);\n }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import Cookies from \"../../lib/cookies.mjs\";\n\nexport { Cookies };\n\nexport class CookieBanner {\n constructor($module) {\n this.$module = $module;\n this.$acceptButton = $module && $module.querySelector('[value=\"accept\"]');\n this.$rejectButton = $module && $module.querySelector('[value=\"reject\"]');\n this.$prompt =\n $module && $module.querySelector(\".tna-cookie-banner__message--prompt\");\n this.$acceptedMessage =\n $module && $module.querySelector(\".tna-cookie-banner__message--accepted\");\n this.$rejectedMessage =\n $module && $module.querySelector(\".tna-cookie-banner__message--rejected\");\n this.$closeButtons = $module && $module.querySelectorAll('[value=\"close\"]');\n\n if (\n !this.$module \|\|\n !this.$acceptButton \|\|\n !this.$rejectButton \|\|\n !this.$prompt \|\|\n !this.$acceptedMessage \|\|\n !this.$rejectedMessage \|\|\n !this.$closeButtons\n ) {\n return;\n }\n\n const policies = this.$module.getAttribute(\"data-policies\") \|\| \"\";\n const extraPolicies = policies\n .split(\",\")\n .filter((x) => x)\n .map((policy) => policy.trim());\n const domain = this.$module.getAttribute(\"data-domain\") \|\| undefined;\n const path = this.$module.getAttribute(\"data-path\") \|\| undefined;\n const secure = this.$module.getAttribute(\"data-secure\") \|\| undefined;\n const policiesKey =\n this.$module.getAttribute(\"data-policieskey\") \|\| undefined;\n\n this.cookies = new Cookies({\n extraPolicies,\n domain,\n path,\n secure,\n policiesKey,\n newInstance: true,\n });\n\n this.cookiePreferencesSet =\n this.$module.getAttribute(\"data-preferenceskey\") \|\|\n \"cookie_preferences_set\";\n const cookiePreferencesSet = this.cookies.hasValue(\n this.cookiePreferencesSet,\n \"true\",\n );\n\n if (!cookiePreferencesSet) {\n this.$module.removeAttribute(\"hidden\");\n\n this.$acceptButton.addEventListener(\"click\", () => this.accept());\n this.$rejectButton.addEventListener(\"click\", () => this.reject());\n }\n }\n\n accept() {\n this.$prompt.setAttribute(\"hidden\", true);\n this.complete();\n this.$acceptedMessage.removeAttribute(\"hidden\");\n this.$acceptedMessage.focus();\n this.$acceptedMessage.setAttribute(\"tabindex\", \"-1\");\n this.cookies.acceptAllPolicies();\n }\n\n reject() {\n this.$prompt.setAttribute(\"hidden\", true);\n this.complete();\n this.$rejectedMessage.removeAttribute(\"hidden\");\n this.$rejectedMessage.focus();\n this.$rejectedMessage.setAttribute(\"tabindex\", \"-1\");\n this.cookies.rejectAllPolicies();\n }\n\n complete() {\n this.cookies.set(this.cookiePreferencesSet, true);\n this.$closeButtons.forEach(($closeButton) => {\n $closeButton.addEventListener(\"click\", () => this.close());\n });\n }\n\n close() {\n this.$module.setAttribute(\"hidden\", true);\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","window","TNAFrontendCookies","TNAFrontendCookieEvents","CookieEventHandler","_createClass","_classCallCheck","_defineProperty","this","key","value","event","callback","Object","hasOwn","events","concat","_toConsumableArray","oneTimeEvents","_this","data","arguments","length","undefined","forEach","eventToTrigger","call","i","splice","Cookies","options","_options$extraPolicie","extraPolicies","_options$domain","domain","_options$path","path","_options$secure","secure","_options$policiesKey","policiesKey","_options$newInstance","newInstance","_options$defaultAge","defaultAge","destroyInstance","document","documentElement","getAttribute","init","savePolicies","_objectSpread","fromEntries","map","k","toLowerCase","usage","settings","marketing","policies","essential","get","deserialised","cookie","split","filter","x","parts","trim","JSON","parse","e","all","exists","decodeURIComponent","_options$maxAge","maxAge","_options$sameSite","sameSite","_options$domain2","_options$path2","_options$secure2","_options$session","session","encodeURIComponent","trigger","set","_this2","keys","policy","setPolicy","accepted","allPolicies","stringify","on","once","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","__webpack_modules__","d","definition","o","defineProperty","enumerable","obj","prop","prototype","hasOwnProperty","r","Symbol","toStringTag","CookieBanner","$module","$acceptButton","querySelector","$rejectButton","$prompt","$acceptedMessage","$rejectedMessage","$closeButtons","querySelectorAll","cookies","cookiePreferencesSet","hasValue","removeAttribute","addEventListener","accept","reject","setAttribute","complete","focus","acceptAllPolicies","rejectAllPolicies","$closeButton","close"],"sourceRoot":""}

package/nationalarchives/components/date-input/date-input.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/date-input/date-input.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AAsLA,4BAxKM,0yDA2KJ,+BAHF,4BAxJM,qwDCzBN,gBACE,aACA,SAGE,4BACE,cCLJ,eDUE,4BACE,WACA,cAEA,cACA,sBD8BJ,4CC1BI,iBD8BJ,6DA0BI,mDChDA,gBAEA,mCACE,aAGF,oDD+CA","file":"date-input.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-list-marker: var(--font-base);\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n // --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-date-input {\n display: flex;\n gap: spacing.space(1);\n\n &__item {\n &-label {\n display: block;\n\n @include typography.font-size(16);\n }\n\n &-input {\n width: 3rem;\n padding: 0 spacing.space(0.375);\n\n display: block;\n box-sizing: border-box;\n\n @include colour.always-light;\n @include colour.colour-font(\"input-foreground\");\n line-height: 2rem;\n\n @include colour.colour-background(\"input-background\");\n\n @include colour.colour-border(\n \"input-border\",\n forms.$form-field-border-width\n );\n border-radius: 0;\n\n &--wider {\n width: 4.5rem;\n }\n\n .tna-form__group--error & {\n @include colour.colour-border(\"form-error-border\");\n }\n }\n }\n\n &--inline {\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n"]}
1	+ {"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/date-input/date-input.scss","../../../../src/nationalarchives/tools/_typography.scss"],"names":[],"mappings":"AAuLA,4BAzKM,0yDA4KJ,+BAHF,4BAzJM,qwDCzBN,gBACE,aACA,SAGE,4BACE,cCLJ,eDUE,4BACE,WACA,cAEA,cACA,sBD8BJ,4CC1BI,iBD8BJ,6DA2BI,mDCjDA,gBAEA,mCACE,aAGF,oDDgDA","file":"date-input.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if($important, !important, null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if($important, !important, null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if($important, !important, null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if($important, !important, null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width colour-var($colour) $style if($important, !important, null);\n } @else {\n outline-color: colour-var($colour) if($important, !important, null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"keyline-dark\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"accent-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\n \"form-error-border\",\n borders.$thick-border-width,\n solid\n );\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width\n #{brand-colour($brandColour)}\n solid;\n } @else {\n border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\") {\n @if $direction != \"\" {\n border-#{$direction}: borders.$thick-border-width transparent solid;\n } @else {\n border: borders.$thick-border-width transparent solid;\n }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n @include colour-css-vars(\"form-error-border\", \"focus-outline\");\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast(\n \"form-error-border\",\n \"focus-outline\"\n );\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-list-marker: var(--accent-border);\n // --accent-list-marker: var(--font-base);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n\n // @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-list-marker: var(--font-base);\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-list-marker: var(--accent-font-base);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n // --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"pink\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"orange\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"green\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"blue\")} !important;\n --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n@mixin image-loader-background {\n @if not features.$disable-image-loader-animations {\n background: linear-gradient(\n -45deg,\n rgba(0 0 0 / 25%),\n rgba(255 255 255 / 25%),\n rgba(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n }\n}\n","@use \"../../variables/forms\";\n@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-date-input {\n display: flex;\n gap: spacing.space(1);\n\n &__item {\n &-label {\n display: block;\n\n @include typography.font-size(16);\n }\n\n &-input {\n width: 3rem;\n padding: 0 spacing.space(0.375);\n\n display: block;\n box-sizing: border-box;\n\n @include colour.always-light;\n @include colour.colour-font(\"input-foreground\");\n line-height: 2rem;\n\n @include colour.colour-background(\"input-background\");\n\n @include colour.colour-border(\n \"input-border\",\n forms.$form-field-border-width\n );\n border-radius: 0;\n\n &--wider {\n width: 4.5rem;\n }\n\n .tna-form__group--error & {\n @include colour.colour-border(\"form-error-border\");\n }\n }\n }\n\n &--inline {\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n font-variation-settings: \"wdth\" 100;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n"]}