{"version":3,"names":["BUTTON_LOCALIZATION","en","ariaLabel","phone","mail","download","loading","de","sv","nl","it","hu","da","fr","es","pl","ro","hr","cs","sl","buttonCss","EonUiButtonStyle0","Button","this","schemeConfig","BUTTON_SCHEME_CONFIG","schemeMap","BUTTON_SCHEME_MAP","localization","renderButtonContent","iconRender","currentIcon","h","class","pfx","icon","iconPosition","name","size","BUTTONSIZE_SMALL","ICONSIZE_SMALL","ICONSIZE_NORMAL","shape","BUTTONSHAPE_ICON","Fragment","BUTTON_ICON_POSITION_LEFT","preloader","scheme","preloaderScheme","text","BUTTON_ICON_POSITION_RIGHT","BUTTONRANK_PRIMARY","BUTTONSIZE_NORMAL","BUTTONTYPE_BUTTON","TARGET_SELF","BUTTON_DEFAULT_ICON_POSITION","onWindowResize","toggleFullWidthOnMobile","fullWidthOnMobile","isMobile","componentWillLoad","applyScheme","setCurrentLocalization","computeShape","computeIcon","computeAriaLabel","componentDidLoad","setCssVariables","buttonLoad","emit","applySchemeDelegate","setCssVariablesDelegate","rank","innerBackground","activeScheme","primaryBackgroundColor","secondaryBackgroundColor","functionalBackgroundColor","setCurrentLocalizationDelegate","ComputeLinkIcon","href","hasText","length","hasIcon","BUTTONSHAPE_TEXT","BUTTONSHAPE_TEXTANDICON","currentAriaLabel","currentLocalization","computeLinkAriaLabel","handleClick","_event","inputType","BUTTONTYPE_SUBMIT","form","hostElement","closest","fakeSubmit","document","createElement","type","style","display","appendChild","click","remove","openModalId","openModal","buttonClick","render","Host","key","fullWidth","ConditionalWrapper","condition","useAsLink","wrapper","children","disabled","tabIndex","navigable","target","onClick","event","defaultWrapper","createSchemes","newSchemes","AllColors.PRELOADER_SQUARES_SCHEMES","forEach","element","schemeName","color","AllColors","toConstantCase","backgroundColor","PRELOADER_SQUARES_SCHEME_CONFIG","PRELOADER_SQUARES_SCHEME_MAP","Map","Object","entries","createPreloaderSquaresMapDefinition","map","background","config","preloaderSquaresCss","EonUiPreloaderSquaresStyle0","PreloaderSquares","loaderText"],"sources":["src/components/button/constants/button-i18n.ts","src/components/button/button.scss?tag=eon-ui-button&encapsulation=shadow","src/components/button/button.tsx","src/components/preloader-squares/constants/preloader-squares-constants.ts","src/components/preloader-squares/preloader-squares.scss?tag=eon-ui-preloader-squares&encapsulation=shadow","src/components/preloader-squares/preloader-squares.tsx"],"sourcesContent":["import { Localization } from \"../../../common/localizable-component\";\nimport { ButtonLocalization } from \"./button-types\";\n\nexport const BUTTON_LOCALIZATION: Localization = {\n en: {\n ariaLabel: {\n phone: \"Call phone number {0}\",\n mail: \"Send a mail to {0}\",\n download: \"Download {0}\",\n loading: \"Loading\"\n }\n },\n de: {\n ariaLabel: {\n phone: \"Rufe {0} an\",\n mail: \"Verfasse eine E-Mail an {0}\",\n download: \"{0} herunterladen\",\n loading: \"Lädt\"\n }\n },\n sv: {\n ariaLabel: {\n phone: \"Ring telefonnummer {0}\",\n mail: \"Skicka e-post till {0}\",\n download: \"Ladda ner {0}\",\n loading: \"Laddar\"\n }\n },\n nl: {\n ariaLabel: {\n phone: \"Bel telefoonnummer {0}\",\n mail: \"Stuur een e-mail naar {0}\",\n download: \"Download {0}\",\n loading: \"Laadt\"\n }\n },\n it: {\n ariaLabel: {\n phone: \"Chiama il numero di telefono {0}\",\n mail: \"Manda una mail a {0}\",\n download: \"Scarica {0}\",\n loading: \"Caricamento\"\n }\n },\n hu: {\n ariaLabel: {\n phone: \"Telefonszám hívása {0}\",\n mail: \"Üzenet küldése {0}\",\n download: \"Letöltés {0}\",\n loading: \"Betöltés\"\n }\n },\n da: {\n ariaLabel: {\n phone: \"Ring til nummer {0}\",\n mail: \"Send mail til {0}\",\n download: \"Download {0}\",\n loading: \"Indlæser\"\n }\n },\n fr: {\n ariaLabel: {\n phone: \"Appeler le numéro de téléphone {0}\",\n mail: \"Envoyer un mail à {0}\",\n download: \"Télécharger {0}\",\n loading: \"Chargement\"\n }\n },\n es: {\n ariaLabel: {\n phone: \"Llama al número de teléfono {0}\",\n mail: \"Enviar un email a {0}\",\n download: \"Descargar {0}\",\n loading: \"Cargando\"\n }\n },\n pl: {\n ariaLabel: {\n phone: \"Zadzwoń pod numer telefonu {0}\",\n mail: \"Wyślij maila na adres {0}\",\n download: \"Pobierz {0}\",\n loading: \"Ładuje\"\n }\n },\n ro: {\n ariaLabel: {\n phone: \"Sună la numărul de telefon {0}\",\n mail: \"Trimiteți un e-mail la {0}\",\n download: \"Descărcați {0}\",\n loading: \"Se încarcă\"\n }\n },\n hr: {\n ariaLabel: {\n phone: \"Nazovi telefonski broj {0}\",\n mail: \"Pošalji e-poštu na {0}\",\n download: \"Preuzmi {0}\",\n loading: \"Učitava\"\n }\n },\n cs: {\n ariaLabel: {\n phone: \"Volejte na telefonní číslo {0}\",\n mail: \"Pošlete mail na {0}\",\n download: \"Stáhnout {0}\",\n loading: \"Načítá\"\n }\n },\n sl: {\n ariaLabel: {\n phone: \"Pokličite telefonsko številko {0}\",\n mail: \"Pošljite pošto na {0}\",\n download: \"Prenesi {0}\",\n loading: \"Nalaga\"\n }\n }\n};\n","/**\n * THEME JSON CONFIG CSS VARS\n * The following default component scss variables can be overwritten via theme configuration per brand.\n * If you need to add new one, please make sure to set a default value.\n * JSON Definition for Component with name \"Example\": testCssVar: \"20px\"\n * Resulting CSS var: $example-test-css-var: 20px;\n */\n\n$button-left-right-padding: 32px !default;\n$button-small-left-right-padding: 24px !default;\n$button-large-left-right-padding: 48px !default;\n$button-height: 48px !default;\n$button-small-height: 36px !default;\n$button-large-height: 56px !default;\n$button-font-size: 18px !default;\n$button-small-font-size: 16px !default;\n$button-large-font-size: 18px !default;\n$button-line-height: 18px !default;\n$button-small-line-height: 16px !default;\n$button-large-line-height: 18px !default;\n$button-primary-border-size: 0px !default;\n$button-small-primary-border-size: 0px !default;\n$button-large-primary-border-size: 0px !default;\n$button-secondary-border-size: 3px !default;\n$button-small-secondary-border-size: 3px !default;\n$button-large-secondary-border-size: 3px !default;\n$button-functional-border-size: 3px !default;\n$button-small-functional-border-size: 3px !default;\n$button-large-functional-border-size: 3px !default;\n$button-shadow: none !default;\n$button-small-shadow: none !default;\n$button-large-shadow: none !default;\n$button-radius: 14px !default;\n$button-small-radius: 10px !default;\n$button-large-radius: 16px !default;\n$button-functional-radius: 4px !default;\n$button-small-functional-radius: 4px !default;\n$button-large-functional-radius: 4px !default;\n$button-margin-icon-text: 12px !default;\n$button-font-base-correction: 0px !default;\n\n/* END THEME JSON CONFIG CSS VARS ******************************************************* */\n\n$button-primary-padding: $button-left-right-padding - $button-primary-border-size;\n$button-small-primary-padding: $button-small-left-right-padding - $button-small-primary-border-size;\n$button-large-primary-padding: $button-large-left-right-padding - $button-large-primary-border-size;\n$button-secondary-padding: $button-left-right-padding - $button-secondary-border-size;\n$button-small-secondary-padding: $button-small-left-right-padding - $button-small-secondary-border-size;\n$button-large-secondary-padding: $button-large-left-right-padding - $button-large-secondary-border-size;\n$button-functional-padding: $button-left-right-padding - $button-functional-border-size;\n$button-small-functional-padding: $button-small-left-right-padding - $button-small-functional-border-size;\n$button-large-functional-padding: $button-large-left-right-padding - $button-large-functional-border-size;\n\n@function capitalize($string) {\n @return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);\n}\n\n@mixin setButtonColors($rank, $state) {\n background-color: v(#{$rank} + \"Background\" + #{capitalize($state)} + \"Color\");\n border-color: v(#{$rank} + \"Border\" + #{capitalize($state)} + \"Color\");\n color: v(#{$rank} + \"TextAndIcon\" + #{capitalize($state)} + \"Color\");\n\n .#{$prefix}icon {\n fill: v(#{$rank} + \"TextAndIcon\" + #{capitalize($state)} + \"Color\");\n }\n}\n\n:host {\n box-sizing: border-box;\n display: inline-block;\n}\n\n:host,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n @include button-reset-appearance;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n pointer-events: none;\n}\n\n:host(.#{$prefix}full-width) {\n display: block;\n}\n\na,\nbutton {\n @include button-reset;\n font-family: $font-family-base;\n position: relative;\n width: auto;\n height: auto;\n min-height: $button-height;\n padding-top: 0;\n padding-bottom: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-grow: 0;\n text-align: center;\n font-weight: bold;\n font-size: $button-font-size;\n font-weight: $font-weight-bold;\n line-height: $button-line-height;\n box-shadow: $button-shadow;\n border-radius: $button-radius;\n text-decoration: none;\n cursor: pointer;\n transition: background-color $transition-duration $transition-timing-function,\n color $transition-duration $transition-timing-function,\n border-color $transition-duration $transition-timing-function,\n opacity $transition-duration $transition-timing-function;\n @include noneUserSelect();\n\n /// hides the dashed inner focus line that FF draws. This is required.\n /* &::-moz-focus-inner {\n border: 0;\n } */\n\n .#{$prefix}icon {\n fill: v(primaryTextAndIconColor);\n transition: fill $transition-duration $transition-timing-function,\n stroke $transition-duration $transition-timing-function;\n\n &.#{$prefix}icon-left {\n margin-right: $button-margin-icon-text;\n }\n\n &.#{$prefix}icon-right {\n margin-left: $button-margin-icon-text;\n }\n }\n\n .#{$prefix}font-base-correction {\n padding: 4px 0px 4px 0px;\n margin-top: $button-font-base-correction;\n overflow-wrap: anywhere;\n }\n\n &.#{$prefix}icon-only {\n .#{$prefix}icon {\n margin-right: 0;\n margin-left: 0;\n }\n }\n\n &.#{$prefix}loading {\n cursor: not-allowed;\n }\n\n &.#{$prefix}primary {\n padding-left: $button-primary-padding;\n padding-right: $button-primary-padding;\n background-color: v(primaryBackgroundColor);\n border: $button-primary-border-size solid v(primaryBorderColor);\n color: v(primaryTextAndIconColor);\n\n &.#{$prefix}icon-only {\n padding-left: calc(8px - $button-primary-border-size) !important;\n padding-right: calc(8px - $button-primary-border-size) !important;\n }\n\n &:focus-visible {\n @include focusBorder(v(primaryFocusOutlineColor));\n @include setButtonColors(\"primary\", \"focus\");\n }\n\n &:hover:not(.#{$prefix}loading) {\n @include setButtonColors(\"primary\", \"hover\");\n }\n\n &.#{$prefix}disabled {\n @include setButtonColors(\"primary\", \"disabled\");\n }\n }\n\n &.#{$prefix}secondary {\n padding-left: $button-secondary-padding;\n padding-right: $button-secondary-padding;\n background-color: v(secondaryBackgroundColor);\n border: $button-secondary-border-size solid v(secondaryBorderColor);\n color: v(secondaryTextAndIconColor);\n\n &.#{$prefix}icon-only {\n padding-left: calc(8px - $button-secondary-border-size) !important;\n padding-right: calc(8px - $button-secondary-border-size) !important;\n }\n\n .#{$prefix}icon {\n fill: v(secondaryTextAndIconColor);\n }\n\n &:focus-visible {\n @include focusBorder(v(secondaryFocusOutlineColor));\n @include setButtonColors(\"secondary\", \"focus\");\n }\n\n &:hover:not(.#{$prefix}loading) {\n @include setButtonColors(\"secondary\", \"hover\");\n }\n\n &.#{$prefix}disabled {\n @include setButtonColors(\"secondary\", \"disabled\");\n }\n }\n\n &.#{$prefix}functional {\n padding-left: $button-functional-padding;\n padding-right: $button-functional-padding;\n background-color: v(functionalBackgroundColor);\n border: $button-functional-border-size solid v(functionalBorderColor);\n border-radius: $button-functional-radius;\n color: v(functionalTextAndIconColor);\n\n &.#{$prefix}icon-only {\n padding-left: calc(8px - $button-functional-border-size) !important;\n padding-right: calc(8px - $button-functional-border-size) !important;\n }\n\n .#{$prefix}icon {\n fill: v(functionalTextAndIconColor);\n }\n\n &:focus-visible {\n @include focusBorder(v(functionalFocusOutlineColor));\n @include setButtonColors(\"functional\", \"focus\");\n }\n\n &:hover:not(.#{$prefix}loading) {\n @include setButtonColors(\"functional\", \"hover\");\n }\n\n &.#{$prefix}disabled {\n @include setButtonColors(\"functional\", \"disabled\");\n }\n }\n\n /** Small button **/\n &.#{$prefix}small {\n min-height: $button-small-height;\n line-height: $button-small-line-height;\n box-shadow: $button-small-shadow;\n border-radius: $button-small-radius;\n font-size: $button-small-font-size;\n\n &.#{$prefix}primary {\n padding-left: $button-small-primary-padding;\n padding-right: $button-small-primary-padding;\n border-width: $button-small-primary-border-size;\n\n &.#{$prefix}icon-only {\n padding-left: calc(6px - $button-small-primary-border-size) !important;\n padding-right: calc(6px - $button-small-primary-border-size) !important;\n }\n }\n\n &.#{$prefix}secondary {\n padding-left: $button-small-secondary-padding;\n padding-right: $button-small-secondary-padding;\n border-width: $button-small-secondary-border-size;\n\n &.#{$prefix}icon-only {\n padding-left: calc(6px - $button-small-secondary-border-size) !important;\n padding-right: calc(6px - $button-small-secondary-border-size) !important;\n }\n }\n\n &.#{$prefix}functional {\n padding-left: $button-small-functional-padding;\n padding-right: $button-small-functional-padding;\n border-width: $button-small-functional-border-size;\n border-radius: $button-small-functional-radius;\n\n &.#{$prefix}icon-only {\n padding-left: calc(6px - $button-small-functional-border-size) !important;\n padding-right: calc(6px - $button-small-functional-border-size) !important;\n }\n }\n }\n\n /** Large button **/\n &.#{$prefix}large {\n min-height: $button-large-height;\n line-height: $button-large-line-height;\n box-shadow: $button-large-shadow;\n border-radius: $button-large-radius;\n font-size: $button-large-font-size;\n\n &.#{$prefix}primary {\n padding-left: $button-large-primary-padding;\n padding-right: $button-large-primary-padding;\n border-width: $button-large-primary-border-size;\n\n &.#{$prefix}icon-only {\n padding-left: calc(12px - $button-large-primary-border-size) !important;\n padding-right: calc(12px - $button-large-primary-border-size) !important;\n }\n }\n\n &.#{$prefix}secondary {\n padding-left: $button-large-secondary-padding;\n padding-right: $button-large-secondary-padding;\n border-width: $button-large-secondary-border-size;\n\n &.#{$prefix}icon-only {\n padding-left: calc(12px - $button-large-secondary-border-size) !important;\n padding-right: calc(12px - $button-large-secondary-border-size) !important;\n }\n }\n\n &.#{$prefix}functional {\n padding-left: $button-large-functional-padding;\n padding-right: $button-large-functional-padding;\n border-width: $button-large-functional-border-size;\n border-radius: $button-large-functional-radius;\n\n &.#{$prefix}icon-only {\n padding-left: calc(12px - $button-large-functional-border-size) !important;\n padding-right: calc(12px - $button-large-functional-border-size) !important;\n }\n }\n }\n\n &.#{$prefix}full-width {\n width: 100%;\n }\n\n @include for-size(phone) {\n &.#{$prefix}full-width-mobile {\n width: 100%;\n }\n }\n\n eon-ui-preloader-squares {\n z-index: 1;\n }\n}\n\na {\n &:focus {\n outline: none;\n }\n\n &:focus-within {\n outline: none;\n }\n}\n","import { Component, Element, h, Prop, Watch, State, Listen, Event, EventEmitter, Host } from \"@stencil/core\";\nimport {\n BUTTONRANK_PRIMARY,\n BUTTONSIZE_NORMAL,\n BUTTONTYPE_BUTTON,\n BUTTONSHAPE_TEXT,\n BUTTONSHAPE_TEXTANDICON,\n BUTTONSHAPE_ICON,\n BUTTONTYPE_SUBMIT,\n TARGET_SELF,\n BUTTONSIZE_SMALL\n} from \"./constants/button-constants\";\nimport {\n ButtonRank,\n ButtonSize,\n ButtonType,\n ButtonShape,\n ButtonSchemeName,\n ButtonSchemeDefinition,\n ButtonTarget,\n ButtonLocalization\n} from \"./constants/button-types\";\nimport { ColorableComponent, applySchemeDelegate, setCssVariablesDelegate } from \"../../common/colorable-component\";\nimport { BUTTON_SCHEME_CONFIG, BUTTON_SCHEME_MAP } from \"./constants/button-constants\";\nimport { isMobile } from \"../../utils/screen-helper\";\nimport { ConditionalWrapper } from \"../../common/conditional-wrapper\";\nimport { ComputeLinkIcon, computeLinkAriaLabel } from \"../../utils/link-helper\";\nimport { Localization, setCurrentLocalizationDelegate, LocalizableComponent } from \"../../common/localizable-component\";\nimport Fragment from \"../../common/fragment\";\nimport pfx from \"../../utils/style-class-prefix-helper\";\nimport { openModal } from \"../../utils/openModal\";\nimport { BUTTON_LOCALIZATION } from \"./constants/button-i18n\";\nimport { ButtonSchemeConfiguration } from \"../../constants/colors\";\nimport { PreloaderSquaresSchemeName } from \"../preloader-squares/constants/preloader-squares-types\";\nimport {\n ButtonIconPosition,\n BUTTON_DEFAULT_ICON_POSITION,\n BUTTON_ICON_POSITION_LEFT,\n BUTTON_ICON_POSITION_RIGHT\n} from \"../../constants/global-constants\";\nimport { ICONSIZE_NORMAL, ICONSIZE_SMALL } from \"../icon/constants/icon-constants\";\n// import { InitLogging } from \"../../decorators/init-logging\";\n\n/**\n * @slot [tooltip] - holds eon-ui-tooltip component.\n */\n\n@Component({\n tag: \"eon-ui-button\",\n styleUrl: \"button.scss\",\n shadow: true\n})\nexport class Button\n implements\n ColorableComponent>,\n LocalizableComponent {\n // @InitLogging() sentryTransaction;\n schemeConfig: ButtonSchemeConfiguration = BUTTON_SCHEME_CONFIG;\n schemeMap = BUTTON_SCHEME_MAP;\n\n @State() activeScheme: ButtonSchemeDefinition;\n\n @State() private shape: ButtonShape;\n\n localization: Localization = BUTTON_LOCALIZATION;\n currentLocalization: ButtonLocalization;\n\n private currentIcon: string;\n private currentAriaLabel: string;\n\n /**\n * Raised when the button has been clicked.\n */\n @Event() buttonClick: EventEmitter;\n\n /**\n * Raised when the button has been loaded.\n */\n @Event() buttonLoad: EventEmitter;\n\n @Element() hostElement: HTMLEonUiButtonElement;\n\n /**\n * The name of the color scheme of the component.\n * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n */\n @Prop({ reflect: true }) scheme: ButtonSchemeName;\n\n /**\n * Whether this button is disabled or not. Disabled buttons can't be clicked and emit no events.\n */\n @Prop({ reflect: true }) disabled: boolean;\n\n /**\n * Whether this button can be focused by keyboard. Defaults to true.\n */\n @Prop() navigable: boolean = true;\n\n /**\n * Use primary whenever the button is the main CTA in the current context.\n * Secondary buttons should only appear next to primary buttons and are rendered as \"outline\" button.\n */\n @Prop() rank: ButtonRank = BUTTONRANK_PRIMARY;\n\n /**\n * The size of the button.\n */\n @Prop({ mutable: true }) size: ButtonSize = BUTTONSIZE_NORMAL;\n\n /**\n * The name of the icon (without file extension) to use in the button (optional).\n * @example \"arrow_right\", \"phone\", \"notification\", \"social_twitter\", \"social_youtube\", \"social_facebook\",\n * \"social_instagram\", \"social_linked_in\", \"play\", \"video_replay\"\n */\n @Prop() icon?: string;\n\n /**\n * A string set as content of the button.\n * You can also omit this and specify HTML content yourself.\n * If you specify both, the content is ignored and this property is used instead.\n * @example \n * @example CONTENT\n */\n @Prop() text: string;\n\n /**\n * The name of the button must be unique per page.!\n *@example \n */\n @Prop() name: string;\n\n /**\n * The type of the button. Defaults to \"button\" which means \"client-side\" handling.\n * Change this to \"submit\" or \"reset\" if the button is used in a form.\n */\n @Prop() inputType: ButtonType = BUTTONTYPE_BUTTON;\n\n /**\n * Specifies the label to use for accessibility.\n * Always provide this for pure icon buttons!\n */\n @Prop({ reflect: false }) ariaLabel: string;\n\n /**\n * Full width of button on Mobile viewport\n */\n @Prop() fullWidthOnMobile: boolean = false;\n\n /**\n * This Prop will toggle the class full-width-on-mobile on basis of fullWidthOnMobile Prop\n */\n @Prop({ mutable: true }) toggleFullWidthOnMobile: boolean = false;\n\n /**\n * Defines the target url of a button.\n * Valid protocols are \"http://\", \"https://\", \"mailto:\" and \"tel:\".\n */\n @Prop({ reflect: true }) href: string;\n\n /**\n * Specifies how the link is opened in the browser, e.g. in new window/tab.\n * @example \"_blank\", \"_self\", \"_parent\", \"_top\"\n * @default \"_self\"\n */\n @Prop() target: ButtonTarget = TARGET_SELF;\n\n /**\n * If set to true, the \"Download\" icon will be used for the button as link and the browser will be forced to download the file instead of rendering it.\n * This is also the case if the href starts with \"file:\".\n */\n @Prop() download: boolean;\n\n /**\n * Whether to use button as CTA link\n */\n @Prop({ reflect: true }) useAsLink: boolean;\n\n /**\n * use this property to open a modal window, the modal must have the same modal-id
\n * see component: Modal\n */\n @Prop() openModalId: string;\n\n /**\n * Show preloader\n */\n @Prop() preloader: boolean = false;\n\n /**\n * Overwrite the color scheme of the preloader.\n */\n @Prop() preloaderScheme: PreloaderSquaresSchemeName;\n\n /**\n * used to set icon position of the Button text. It can either be left or right.\n */\n @Prop() iconPosition: ButtonIconPosition = BUTTON_DEFAULT_ICON_POSITION;\n\n /**\n * Represents the internal color of the component.\n * It will be read by colorable-component.ts getColorOfNearestBackground() function to realize\n * the detection of backgrounds inside of components, hidden by shadow dom.\n * @disableControlInStorybook true\n */\n @Prop({ reflect: true, mutable: true }) innerBackground: string;\n\n /**\n * Full width of button for all the viewport.\n */\n @Prop() fullWidth: boolean = false;\n\n @Watch(\"fullWidthOnMobile\")\n @Listen(\"resize\", { target: \"window\" })\n onWindowResize() {\n this.toggleFullWidthOnMobile = this.fullWidthOnMobile && isMobile();\n }\n\n componentWillLoad() {\n this.applyScheme();\n this.setCurrentLocalization();\n this.computeShape();\n this.computeIcon();\n this.computeAriaLabel();\n this.onWindowResize();\n }\n\n componentDidLoad() {\n this.setCssVariables();\n this.buttonLoad.emit();\n }\n\n @Watch(\"scheme\")\n applyScheme() {\n applySchemeDelegate(this);\n }\n\n @Watch(\"activeScheme\")\n setCssVariables(): void {\n setCssVariablesDelegate(this);\n\n switch (this.rank) {\n case \"primary\":\n this.innerBackground = this.activeScheme.primaryBackgroundColor;\n break;\n case \"secondary\":\n this.innerBackground = this.activeScheme.secondaryBackgroundColor;\n break;\n case \"functional\":\n this.innerBackground = this.activeScheme.functionalBackgroundColor;\n break;\n default:\n this.innerBackground = this.activeScheme.primaryBackgroundColor;\n break;\n }\n }\n\n setCurrentLocalization() {\n setCurrentLocalizationDelegate(this);\n }\n\n @Watch(\"href\")\n @Watch(\"icon\")\n @Watch(\"download\")\n @Watch(\"text\")\n private computeIcon() {\n if (this.icon) {\n this.currentIcon = this.icon;\n return;\n }\n this.currentIcon = ComputeLinkIcon(this.href, this.download, \"button\");\n }\n\n @Watch(\"text\")\n @Watch(\"icon\")\n @Watch(\"href\")\n private computeShape() {\n const hasText = this.text != null && this.text.length > 0;\n const hasIcon = this.icon != null && this.icon.length > 0;\n\n let shape: ButtonShape = BUTTONSHAPE_TEXT;\n if (hasText && hasIcon) {\n shape = BUTTONSHAPE_TEXTANDICON;\n } else if (!hasText && hasIcon) {\n shape = BUTTONSHAPE_ICON;\n }\n this.shape = shape;\n }\n\n @Watch(\"href\")\n @Watch(\"preloader\")\n @Watch(\"ariaLabel\")\n @Watch(\"download\")\n private computeAriaLabel() {\n // When preloading aria-label should always indicate the loading state\n if (this.preloader) {\n this.currentAriaLabel = this.currentLocalization.ariaLabel.loading;\n return;\n }\n\n // If component is not indicating preloading, check whether aria label is set.\n if (this.ariaLabel) {\n this.currentAriaLabel = this.ariaLabel;\n return;\n }\n\n // If not label is set, check whether url is connected to mail, download or anything like this.\n this.currentAriaLabel = computeLinkAriaLabel(this.currentLocalization, this.href, this.download);\n }\n\n handleClick(_event: Event) {\n if (this.inputType === BUTTONTYPE_SUBMIT) {\n // add a fake button to the enclosing form, click it and then remove it to be able to submit through the ShadowDOM.\n // See https://www.hjorthhansen.dev/shadow-dom-and-forms/.\n const form = this.hostElement.closest(\"form\");\n if (form != null) {\n // event.preventDefault();\n const fakeSubmit = document.createElement(\"button\");\n fakeSubmit.type = BUTTONTYPE_SUBMIT;\n fakeSubmit.style.display = \"none\";\n form.appendChild(fakeSubmit);\n fakeSubmit.click();\n fakeSubmit.remove();\n }\n }\n if (!!this.openModalId) {\n openModal(this.openModalId);\n }\n this.buttonClick.emit();\n }\n\n renderButtonContent = (ariaLabel) => {\n let iconRender = () => {\n return (\n this.currentIcon && (\n \n )\n );\n };\n\n return (\n \n {this.iconPosition === BUTTON_ICON_POSITION_LEFT && iconRender()}\n {this.preloader ? (\n \n ) : (\n {this.text}\n )}\n {this.iconPosition === BUTTON_ICON_POSITION_RIGHT && iconRender()}\n \n );\n };\n\n render() {\n return (\n \n (\n this.handleClick(event)}\n >\n {children}\n \n )}\n defaultWrapper={(children) => (\n this.handleClick(event)}\n >\n {children}\n \n )}\n >\n {this.renderButtonContent(this.currentAriaLabel)}\n \n \n \n );\n }\n}\n","import { PreloaderSquaresSchemeDefinition } from \"./preloader-squares-types\";\nimport { BackgroundColor } from \"../../background/constants/background-types\";\n\nimport * as AllColors from \"../../../constants/colors\";\nimport { toConstantCase } from \"../../../utils/string-format\";\nimport { createPreloaderSquaresMapDefinition } from \"../../../utils/scheme-helper\";\n\nfunction createSchemes() {\n let newSchemes: AllColors.PreloaderSquaresSchemeConfiguration = {};\n\n AllColors.PRELOADER_SQUARES_SCHEMES.forEach((element) => {\n newSchemes[element.schemeName] = {\n color: AllColors[`COLOR_${toConstantCase(element.schemeName)}`],\n backgroundColor: AllColors[`COLOR_${toConstantCase(element.schemeName)}`]\n };\n if (element.scheme) {\n newSchemes[element.schemeName] = { ...newSchemes[element.schemeName], ...element.scheme };\n }\n });\n return newSchemes;\n}\n\nexport const PRELOADER_SQUARES_SCHEME_CONFIG: AllColors.PreloaderSquaresSchemeConfiguration = createSchemes();\n\nexport const PRELOADER_SQUARES_SCHEME_MAP: Map = new Map(\n Object.entries(createPreloaderSquaresMapDefinition()).map(([background, config]) => [\n background as BackgroundColor,\n PRELOADER_SQUARES_SCHEME_CONFIG[config as string]\n ])\n);\n","/**\n * THEME JSON CONFIG CSS VARS\n * The following default component scss variables can be overwritten via theme configuration per brand.\n * If you need to add new one, please make sure to set a default value.\n * JSON Definition for Component with name \"Example\": testCssVar: \"20px\"\n * Resulting CSS var: $example-test-css-var: 20px;\n */\n\n$preloader-squares-wrapper-width: 88px !default;\n$preloader-squares-wrapper-height: 22px !default;\n$preloader-squares-item-width: 14px !default;\n$preloader-squares-item-height: 14px !default;\n$preloader-squares-default-radius: 100% !default;\n\n/* END THEME JSON CONFIG CSS VARS ******************************************************* */\n\n$animDuration: 1.5s;\n$delay: 100ms;\n$decay: 1.4;\n\n:host {\n display: inline-block;\n}\n\n.#{$prefix}preloader-wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: auto;\n\n .#{$prefix}preloader-svg {\n position: relative;\n height: 16px;\n line-height: 16px;\n\n .#{$prefix}preloader-shape {\n animation-duration: $animDuration;\n animation-iteration-count: infinite;\n animation-timing-function: cubic-bezier(0.33, 0, 0.35, 1);\n animation-name: fade-in;\n fill: v(backgroundColor);\n\n &.#{$prefix}preloader-shape-2 {\n animation-delay: $delay;\n }\n\n &.#{$prefix}preloader-shape-3 {\n animation-delay: $delay * 2;\n }\n\n &.#{$prefix}preloader-shape-4 {\n animation-delay: $delay * 3;\n }\n }\n\n @keyframes fade-in {\n 0% {\n opacity: 0;\n }\n\n 30% {\n opacity: 0;\n }\n\n 40% {\n opacity: 1;\n }\n\n 60% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n }\n }\n\n .#{$prefix}preloader-text {\n color: v(color);\n font-family: $font-family-base;\n font-size: 18px;\n font-weight: 400;\n line-height: 24px;\n margin-top: 18px;\n }\n}\n\n/*!\n * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)\n * Copyright 2015 Daniel Cardoso <@DanielCardoso>\n * Licensed under MIT\n */\n.#{$prefix}preloader-squares,\n.#{$prefix}preloader-squares > div {\n position: relative;\n box-sizing: border-box;\n}\n\n.#{$prefix}preloader-squares {\n display: block;\n font-size: 0;\n color: v(backgroundColor);\n}\n\n.#{$prefix}preloader-squares > div {\n display: inline-block;\n float: none;\n background-color: currentColor;\n border: 0 solid currentColor;\n}\n\n.#{$prefix}preloader-squares {\n width: $preloader-squares-wrapper-width;\n height: $preloader-squares-wrapper-height;\n}\n\n.#{$prefix}preloader-squares > div:nth-child(1) {\n animation-delay: -600ms;\n}\n\n.#{$prefix}preloader-squares > div:nth-child(2) {\n animation-delay: -400ms;\n}\n\n.#{$prefix}preloader-squares > div:nth-child(3) {\n animation-delay: -200ms;\n}\n\n.#{$prefix}preloader-squares > div:nth-child(4) {\n animation-delay: 0ms;\n}\n\n.#{$prefix}preloader-squares > div {\n width: $preloader-squares-item-width;\n height: $preloader-squares-item-height;\n margin: 4px;\n border-radius: $preloader-squares-default-radius;\n\n //animation: ball-pulse 1s ease infinite;\n animation: fade-in 1s ease infinite;\n}\n\n/*\n * Animation\n */\n\n//@keyframes ball-pulse {\n// 0%,\n// 60%,\n// 100% {\n// opacity: 1;\n// transform: scale(1);\n// }\n// 30% {\n// opacity: 0.1;\n// transform: scale(0.01);\n// }\n//}\n","import { h, Component, Host, State, Element, Prop, Watch } from \"@stencil/core\";\nimport { ColorableComponent, applySchemeDelegate, setCssVariablesDelegate } from \"../../common/colorable-component\";\nimport { PreloaderSquaresSchemeDefinition, PreloaderSquaresSchemeName } from \"./constants/preloader-squares-types\";\nimport { PRELOADER_SQUARES_SCHEME_CONFIG, PRELOADER_SQUARES_SCHEME_MAP } from \"./constants/preloader-squares-constants\";\nimport pfx from \"../../utils/style-class-prefix-helper\";\nimport { PreloaderSquaresSchemeConfiguration } from \"../../constants/colors\";\nimport { IS_SQUIRCLE } from \"../../constants/global-constants\";\n// import { InitLogging } from \"../../decorators/init-logging\";\n\n@Component({\n tag: \"eon-ui-preloader-squares\",\n styleUrl: \"preloader-squares.scss\",\n shadow: true\n})\nexport class PreloaderSquares\n implements ColorableComponent> {\n // @InitLogging() sentryTransaction;\n schemeConfig: PreloaderSquaresSchemeConfiguration = PRELOADER_SQUARES_SCHEME_CONFIG;\n schemeMap = PRELOADER_SQUARES_SCHEME_MAP;\n\n /**\n * The components active scheme. If {@link scheme} is set, it will be set to the corresponding scheme.\n * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n */\n @State() activeScheme: PreloaderSquaresSchemeDefinition;\n\n @Element() hostElement: HTMLEonUiPreloaderSquaresElement;\n\n /**\n * The name of the color scheme of the component.\n * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n */\n @Prop({ reflect: true }) scheme: PreloaderSquaresSchemeName;\n\n /**\n * Text under the preloader\n */\n @Prop() loaderText: string;\n\n componentWillLoad() {\n this.applyScheme();\n }\n\n componentDidLoad() {\n this.setCssVariables();\n }\n\n @Watch(\"scheme\")\n applyScheme() {\n applySchemeDelegate(this);\n }\n\n @Watch(\"activeScheme\")\n setCssVariables(): void {\n setCssVariablesDelegate(this);\n }\n\n render() {\n return (\n \n {IS_SQUIRCLE ? (\n
\n
\n \n \n \n \n \n \n
\n {this.loaderText &&
{this.loaderText}
}\n
\n ) : (\n
\n
\n
\n
\n
\n
\n
\n {this.loaderText &&
{this.loaderText}
}\n
\n )}\n \n );\n }\n}\n"],"mappings":"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"}