New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@axa-ch/button-link
Advanced tools
@axa-ch/button-link - npm Package Compare versions
Comparing version 6.0.2 to 7.0.0
501
lib/index.js
@@ -1,476 +0,25 @@ | ||
| import { html, LitElement, css, unsafeCSS } from 'lit'; | ||
| import { classMap } from 'lit/directives/class-map.js'; | ||
| import AXAIcon from '@axa-ch/icon'; | ||
| import '@skatejs/val'; | ||
| function _taggedTemplateLiteral(strings, raw) { | ||
| if (!raw) { | ||
| raw = strings.slice(0); | ||
| } | ||
| return Object.freeze(Object.defineProperties(strings, { | ||
| raw: { | ||
| value: Object.freeze(raw) | ||
| } | ||
| })); | ||
| } | ||
| var defineOnce = ((name, customElementClass) => { | ||
| // normalize name since HTML tag names don't allow case distinction | ||
| var lowerCaseName = name.toLowerCase(); // custom element not already registered? | ||
| if (!window.customElements.get(lowerCaseName)) { | ||
| // no, register it now | ||
| window.customElements.define(lowerCaseName, customElementClass); | ||
| } // return its name as a convenience | ||
| return lowerCaseName; | ||
| }); | ||
| var RESERVED_CHARACTER = '{'; // not allowed in HTML tags or their attributes ... | ||
| // and also not part of static template strings due to ${...} syntax! | ||
| // helper functions | ||
| var toKebabCase = dottedVersionString => "".concat(dottedVersionString).replace(/\./g, '-').replace(/[^A-Za-z0-9-]/g, ''); | ||
| var versionedTag = (tagName, version) => "".concat(tagName, "-").concat(toKebabCase(version)); | ||
| var extractDependencies = componentClass => { | ||
| var { | ||
| versions, | ||
| tagName | ||
| } = componentClass; // extract all dependencies... | ||
| var dependencies = Object.keys(versions) // ... by comparing with master-component tag name | ||
| .filter(name => name !== tagName) // ... and sorting longest-first (e.g. axa-button-link comes before axa-button) | ||
| .sort((a, b) => b.length - a.length); // pair the list of dependency tag names with their versions | ||
| return [dependencies, dependencies.map(_tagName => versions[_tagName])]; | ||
| }; | ||
| var oldTag = function oldTag(tagName) { | ||
| var closing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; | ||
| var openingBracket = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '<'; | ||
| return "".concat(openingBracket).concat(closing).concat(tagName); | ||
| }; // How to make a new tag? It's tempting to just append the version info. | ||
| // However, we don't want to rewrite tags more than once: given axa-button-link in version 6.3.4 | ||
| // and axa-button in version 5.0.9, we DONT'T WANT | ||
| // <axa-button-link =1> <axa-button-link-6-3-4 =2> <axa-button-5-0-9-link-6-3-4. | ||
| // So, the simplest solution replaces a rewritten tag in such a way that it does not START | ||
| // like any other tag, using a reserved character '{'. To continue with our example, we might have | ||
| // <axa-button-link =1> {axa-button-link-6-3-4. Then the erroneous rewriting step =2> can no longer match. | ||
| // Of course, in the end we need a bulk replacement of the '{'s by their original '<'s, which is simple. | ||
| var newTag = (tagName, aVersion, closing) => oldTag(versionedTag(tagName, aVersion), closing, RESERVED_CHARACTER); // Example: someStrings = ['<div><axa-dropdown .items="','" </axa-dropdown></div>'] | ||
| // aTagname = 'axa-dropdown', aVersion = '7.0.2' | ||
| // | ||
| // Rewritten as ['<div><axa-dropdown-7-0-2 .items="','" </axa-dropdown-7-0-2></div>']. | ||
| // | ||
| // Note: this uses the split-join technique to perform global string substitution | ||
| // without needing the special-character escaping necessary for | ||
| // a reg-exp-based alternative (the latter is marginally faster, but our strings here are short) | ||
| var rewrite = (someStrings, aTagName, aVersion) => someStrings.map(string => string.split(oldTag(aTagName)).join(newTag(aTagName, aVersion)).split(oldTag(aTagName, '/')).join(newTag(aTagName, aVersion, '/'))); // /// | ||
| // API functions | ||
| // /// | ||
| // examples: | ||
| // defineVersioned([AXADatepicker], __ VERSION_INFO__); // main component | ||
| // defineVersioned([AXADropdown], __ VERSION_INFO__, this); // dependent component | ||
| // defineVersioned([AXACheckbox], 'rsv'); // custom version | ||
| var defineVersioned = (dependencies, versionInfo, parentInstance) => { | ||
| // set up | ||
| var customVersion = typeof versionInfo === 'string' && versionInfo; | ||
| var versionedTagName = ''; // process all dependant components that it lists... | ||
| dependencies.forEach(dependency => { | ||
| var componentClass = dependency instanceof HTMLElement ? dependency.constructor : dependency; // extract each dependant component's version | ||
| var { | ||
| tagName | ||
| } = componentClass; | ||
| var externalVersion = !customVersion && versionInfo[tagName]; // ordinary, non-POD versioning? | ||
| if (externalVersion) { | ||
| // yes, first time versioning/registration of this component, but its class | ||
| // contains a PL-reserved 'versions' property? | ||
| if (!window.customElements.get(tagName) && componentClass.versions) { | ||
| // yes, this class is wrongly implemented - premature exit | ||
| throw Error("'versions' is a reserved class property, but was found in ".concat(tagName, "'s class")); | ||
| } // inject version info into component-defining class - this helps for live debugging | ||
| componentClass.versions = externalVersion; // define its *unversioned*-tag variant first | ||
| defineOnce(tagName, componentClass); | ||
| } // extract each dependant component's version, | ||
| var { | ||
| versions | ||
| } = componentClass; // If there is no version found, use the wrapping custom-element's version | ||
| if (!versions && parentInstance) { | ||
| // returns an array containing one object, which contains the tagname of the parent as key and its deployed version as value | ||
| versions = versionInfo[parentInstance.constructor.tagName]; // extract the one item in the versions array and get only the version as string | ||
| // eslint-disable-next-line prefer-destructuring | ||
| versions[tagName] = Object.values(versions)[0]; | ||
| } // assembling a new, versioned name, | ||
| var version = customVersion || versions[tagName]; | ||
| versionedTagName = versionedTag(tagName, version); // and redundantly defining | ||
| // versionedTagName |-> dependentComponentClass' | ||
| // in parallel to the existing unversioned definition | ||
| // tagName |-> dependentComponentClass | ||
| // | ||
| // Note: the class expression formally creates a *new* dependentComponentClass' with identical behaviour, | ||
| // which is needed to get around a bi-uniqueness constraint imposed by the | ||
| // custom-elements registry, cf. https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define | ||
| // under section Exceptions:NotSupportedError) | ||
| defineOnce(versionedTagName, class extends componentClass {}); | ||
| }); | ||
| return versionedTagName; // for convenience in single-component custom-versioned definitions | ||
| }; // prettier-ignore | ||
| var versionedHtml = componentInstance => function (strings) { | ||
| // derive class from instance | ||
| var componentClass = componentInstance.constructor; // extract dependency info by looking at versions of component | ||
| var [tagNames, versions] = extractDependencies(componentClass); // rewrite incoming array of static parts of template literals | ||
| // in such a way that tags of dependent components are versioned: | ||
| var newStrings = strings; // 1. rewriting proper, turning tags into versioned ones with funny initial brackets (see newTag(...) above) | ||
| for (var i = 0, n = tagNames.length; i < n; i++) { | ||
| newStrings = rewrite(newStrings, tagNames[i], versions[i]); | ||
| } // 2. finish rewriting by converting funny initial brackets back to standard ones | ||
| for (var _i = 0, _n = newStrings.length; _i < _n; _i++) { | ||
| newStrings[_i] = newStrings[_i].split(RESERVED_CHARACTER).join('<'); | ||
| } // fake a proper TemplateResult because lit now checks the .raw property | ||
| // (cf. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#raw_strings) | ||
| newStrings.raw = newStrings; // let lit-html see the rewritten static parts together with the | ||
| // unchanged dynamic arg(ument)s | ||
| for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| args[_key - 1] = arguments[_key]; | ||
| } | ||
| return html(newStrings, ...args); | ||
| }; | ||
| var isDefined = value => !(value === undefined || value === null); | ||
| // (IE11 does not support new Map([iterable]), so we have to initialize the map | ||
| // with .set calls for each key) | ||
| var DEFAULT_VALUE_OF_TYPE = new Map(); | ||
| [[String, ''], [Boolean, false], [Object, {}], [Array, []], [Number, 0], [Function, () => {}]].forEach(_ref => { | ||
| var [key, value] = _ref; | ||
| DEFAULT_VALUE_OF_TYPE.set(key, value); | ||
| }); | ||
| var emptyFunction = () => {}; // convert *attribute* value | ||
| var convert = (value, type) => { | ||
| if (type === Number) { | ||
| return parseFloat(value); | ||
| } | ||
| if (type === Function) { | ||
| // corner case: inline event handlers like onchange="alert(event)" cannot be reliably converted from string, | ||
| // so just return an empty function s.t. event-handler invocations in component code don't throw exceptions | ||
| // (components are responsible for firing synthetic events on their root element instead to trigger expected | ||
| // inline event handlers) | ||
| return emptyFunction; | ||
| } | ||
| return type === Array || type === Object ? JSON.parse(value) : value; | ||
| }; | ||
| var applyDefaults = ceInst => { | ||
| var { | ||
| constructor: { | ||
| properties | ||
| } | ||
| } = ceInst; // get all properties of the custom element and loop over each key | ||
| Object.keys(properties).forEach(property => { | ||
| // extract default value and property type | ||
| var propertyValue = properties[property]; | ||
| var { | ||
| type, | ||
| converter, | ||
| defaultValue | ||
| } = propertyValue; | ||
| if (!type) { | ||
| if (!converter) { | ||
| throw new Error("<".concat(ceInst.nodeName, "> property \"").concat(property, "\" is missing a type!")); | ||
| } | ||
| return; | ||
| } // respect property values defined before CE is constructed | ||
| var value = ceInst[property]; | ||
| if (isDefined(value)) { | ||
| return; | ||
| } // Boolean attributes in HTML are true if present, false otherwise. | ||
| // For all other types, get their value as string... | ||
| value = type === Boolean ? ceInst.hasAttribute(property) : ceInst.getAttribute(property); // .. and if defined | ||
| if (isDefined(value)) { | ||
| // convert it | ||
| ceInst[property] = convert(value, type); | ||
| return; | ||
| } // otherwise, apply default | ||
| // make sure the set value() function is never triggered when defaultValue | ||
| // is undefined otherwise the isControlled flag and firstTime flag are messed up in | ||
| // some components containing controlledness. Writing undefined again on value counts as change | ||
| if (defaultValue === undefined && 'defaultValue' in propertyValue) { | ||
| return; | ||
| } // component author explicitly specified a default value for this property? | ||
| // (This allows *all* values as defaults, *including* undefined. The latter is | ||
| // the proper default for 'value' properties in React's controlled-component mode.) | ||
| // no, derive it from general per-type defaults | ||
| ceInst[property] = 'defaultValue' in propertyValue // component author wants full control of their default value? | ||
| ? defaultValue // yes, apply it | ||
| : DEFAULT_VALUE_OF_TYPE.get(type); | ||
| }); | ||
| }; | ||
| var buttonLinkCSS = ":host {\n display: inline-block;\n vertical-align: bottom;\n}\n\n.a-button-link {\n font-size: 14px;\n letter-spacing: 0.02em;\n line-height: 17px;\n font-family: \"Source Sans Pro\", Arial, sans-serif;\n position: relative;\n display: inline-block;\n box-sizing: border-box;\n padding: 0 30px;\n margin: 0;\n width: 100%;\n vertical-align: bottom;\n -webkit-hyphens: auto;\n -ms-hyphens: auto;\n hyphens: auto;\n overflow-wrap: break-word;\n word-wrap: break-word;\n text-decoration: none;\n text-transform: uppercase;\n color: #fff;\n background-color: #00008f;\n border: solid 2px #00008f;\n border-bottom-color: #00005b;\n}\n.a-button-link:hover, .a-button-link:active, .a-button-link:focus {\n cursor: pointer;\n text-decoration: none;\n background-color: #00005b;\n border-color: #00005b;\n outline: 0;\n}\n.a-button-link[aria-disabled=true] {\n color: #999;\n background-color: #e5e5e5;\n border-color: #e5e5e5;\n border-bottom-color: #ccc;\n pointer-events: none;\n}\n.a-button-link__flex-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n min-height: 36px;\n height: 25px;\n box-sizing: border-box;\n}\n.a-button-link__icon {\n display: flex;\n margin-right: 10px;\n}\n.a-button-link__arrow {\n display: flex;\n margin-left: 10px;\n}\n\n.a-button-link--large {\n font-size: 16px;\n letter-spacing: 0.02em;\n line-height: 24px;\n font-family: \"Source Sans Pro\", Arial, sans-serif;\n}\n\n.a-button-link--large .a-button-link__flex-wrapper {\n min-height: 46px;\n}\n\n.a-button-link--small .a-button-link__flex-wrapper {\n min-height: 26px;\n}\n\n.a-button-link--motion {\n z-index: 0;\n overflow: hidden;\n transition: color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;\n}\n.a-button-link--motion::after {\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n display: block;\n width: 0.001px;\n height: 100vw;\n content: \"\";\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n transition: width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;\n background-color: #00005b;\n}\n.a-button-link--motion:hover, .a-button-link--motion:focus {\n background-color: #00008f;\n color: #fff;\n}\n.a-button-link--motion:hover::after, .a-button-link--motion:focus::after {\n width: 110%;\n background-color: #00005b;\n}\n\n.a-button-link--red {\n background-color: #f07662;\n border-color: #f07662;\n border-bottom-color: #ec4d33;\n}\n.a-button-link--red:hover, .a-button-link--red:active, .a-button-link--red:focus {\n background-color: #ec4d33;\n border-color: #ec4d33;\n}\n.a-button-link--red.a-button-link--motion::after {\n background-color: #ec4d33;\n}\n.a-button-link--red.a-button-link--motion:hover, .a-button-link--red.a-button-link--motion:focus {\n background-color: #f07662;\n color: #fff;\n}\n.a-button-link--red.a-button-link--motion:hover::after, .a-button-link--red.a-button-link--motion:focus::after {\n background-color: #ec4d33;\n}\n\n.a-button-link--secondary {\n background-color: transparent;\n border-bottom-color: #00008f;\n color: #00008f;\n}\n.a-button-link--secondary:hover, .a-button-link--secondary:active, .a-button-link--secondary:focus {\n color: #fff;\n}\n.a-button-link--secondary.a-button-link--motion {\n background-color: transparent;\n}\n\n.a-button-link--inverted {\n background-color: transparent;\n border-color: #fff;\n color: #fff;\n}\n.a-button-link--inverted:hover, .a-button-link--inverted:active, .a-button-link--inverted:focus {\n color: #00005b;\n background-color: #fff;\n border-color: #fff;\n}\n.a-button-link--inverted.a-button-link--motion {\n background-color: transparent;\n}\n.a-button-link--inverted.a-button-link--motion::after {\n background-color: #fff;\n}\n\n.a-button-link--inverted-blue-ocean:hover, .a-button-link--inverted-blue-ocean:active, .a-button-link--inverted-blue-ocean:focus {\n color: #4976ba;\n}\n\n.a-button-link--inverted-red-tosca:hover, .a-button-link--inverted-red-tosca:active, .a-button-link--inverted-red-tosca:focus {\n color: #914146;\n}\n\n.a-button-link--inverted-purple-logan:hover, .a-button-link--inverted-purple-logan:active, .a-button-link--inverted-purple-logan:focus {\n color: #9190ac;\n}\n\n.a-button-link--inverted-green-viridian:hover, .a-button-link--inverted-green-viridian:active, .a-button-link--inverted-green-viridian:focus {\n color: #668980;\n}\n\n.a-button-link--inverted-blue-teal:hover, .a-button-link--inverted-blue-teal:active, .a-button-link--inverted-blue-teal:focus {\n color: #027180;\n}"; | ||
| var childStyles = "axa-button-link {\n position: relative;\n}\naxa-button-link[disabled] {\n pointer-events: none;\n}"; | ||
| /* base class for non-ShadowDom components */ | ||
| // map: customElementTagName |-> (ownerDocument |-> {referenceCount,style}) | ||
| var crossTagReferenceCounts = {}; // BASE CLASS | ||
| class InlineStyles extends LitElement { | ||
| /* append inline styles iff first instance in current document/ShadowRoot */ | ||
| inlineStyles() { | ||
| var staticProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'styles'; | ||
| // get this node's document or ShadowRoot, to be used as map key to attach | ||
| // reference-count metadata to | ||
| // N.B. getRootNode needs polyfill for non-Chromium Edge / IE | ||
| // (https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode) | ||
| var root = this.getRootNode(); // retrieve all reference counts by tag name, initializing as needed | ||
| // with WeakMap(). WeakMap (supported by IE11) acts as defense-in-depth | ||
| // against memory leaks if disconnectedCallback is never called | ||
| // (allowed by the spec). | ||
| var referenceCounts = crossTagReferenceCounts[this.tagName] || new WeakMap(); // one more reference, caused by this instance | ||
| var info = referenceCounts.get(root) || {}; | ||
| var referenceCount = (info.referenceCount || 0) + 1; | ||
| info.referenceCount = referenceCount; // persist reference-count metadata | ||
| referenceCounts.set(root, referenceCount); | ||
| crossTagReferenceCounts[this.tagName] = referenceCounts; // no style sheet attached sofar? | ||
| if (referenceCount === 1) { | ||
| // remember our root in the instance, if not available natively | ||
| // (ownerDocument), for DOM-removal-time cleanup. | ||
| if (this.ownerDocument !== root) { | ||
| this._rootNode = root; | ||
| } // provision inline style sheet with *string* content | ||
| // from the class property 'styles' | ||
| var style = document.createElement('style'); | ||
| var cssAsString = this.constructor[staticProps]; // version the CSS rule selectors, if component | ||
| // does not bear its generic name | ||
| var versionedComponentName = this.nodeName.toLowerCase(); // e.g. axa-datepicker-7-0-2 | ||
| var genericComponentName = this.constructor.tagName; // e.g. axa-datepicker | ||
| if (versionedComponentName !== genericComponentName) { | ||
| // in non-ShadowDOM components, the leftmost rule-selector item | ||
| // is the component name itself, serving as a poor-man's rule scoping construct. | ||
| // E.g. datepicker rules are assumed to look like this: | ||
| // axa-datepicker .class1 .... classN { ... } | ||
| cssAsString = cssAsString.split(genericComponentName).join(versionedComponentName); // now, after the above string-to-string transformation they look like this: | ||
| // axa-datepicker-7-0-2 .class1 .... classN { ... } | ||
| } | ||
| style.textContent = cssAsString; | ||
| style.dataset.name = this.tagName.toLowerCase(); // for testing/debugging purposes | ||
| // append it at the right place, *outside* of this instance's children | ||
| // eslint-disable-next-line no-undef | ||
| var parent = root instanceof ShadowRoot ? root : document.head; | ||
| parent.appendChild(style); | ||
| info.style = style; | ||
| } // persist reference-count metadata | ||
| referenceCounts.set(root, info); | ||
| crossTagReferenceCounts[this.tagName] = referenceCounts; | ||
| } | ||
| /* DOM-removal cleanup in module globals */ | ||
| disconnectedCallback() { | ||
| super.disconnectedCallback(); // if applicable, prepare reference-count metadata | ||
| var referenceCounts = crossTagReferenceCounts[this.tagName]; | ||
| if (!referenceCounts) { | ||
| return; | ||
| } | ||
| var root = this._rootNode || this.ownerDocument; | ||
| var info = referenceCounts.get(root) || {}; | ||
| var referenceCount = (info.referenceCount || 0) - 1; // remove or update reference-count metadata | ||
| if (referenceCount < 1) { | ||
| referenceCounts.delete(root); // give an early hint to GC | ||
| var { | ||
| style | ||
| } = info; | ||
| if (style && style.parentNode) { | ||
| style.parentNode.removeChild(style); // remove style node as well | ||
| } | ||
| } else { | ||
| info.referenceCount = referenceCount; | ||
| referenceCounts.set(root, info); | ||
| } | ||
| } | ||
| } | ||
| var _templateObject, _templateObject2, _templateObject3, _templateObject4; | ||
| var ARROW_RIGHT = 'arrow-right'; | ||
| class AXAButtonLink extends InlineStyles { | ||
| static get tagName() { | ||
| return 'axa-button-link'; | ||
| } | ||
| static get styles() { | ||
| return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n "])), unsafeCSS(buttonLinkCSS)); | ||
| } // Parent class InlineStyles needs a static method to retrive styles | ||
| // name of such method is passed when calling: this.inlineStyles('resetHeadingCss'); | ||
| static get blockMouseEventsCss() { | ||
| return childStyles; | ||
| } | ||
| static get properties() { | ||
| return { | ||
| href: { | ||
| type: String | ||
| }, | ||
| external: { | ||
| type: Boolean | ||
| }, | ||
| // secondary, red, inverted, inverted-blue-ocean, inverted-red-tosca, inverted-purple-logan, inverted-green-viridian, inverted-blue-teal | ||
| variant: { | ||
| type: String | ||
| }, | ||
| icon: { | ||
| type: String | ||
| }, | ||
| size: { | ||
| type: String | ||
| }, | ||
| motionOff: { | ||
| type: Boolean | ||
| }, | ||
| disabled: { | ||
| type: Boolean, | ||
| reflect: true | ||
| }, | ||
| onClick: { | ||
| type: Function, | ||
| attribute: false | ||
| } | ||
| }; | ||
| } | ||
| constructor() { | ||
| super(); | ||
| applyDefaults(this); | ||
| defineVersioned([AXAIcon], { | ||
| "axa-button-link": { | ||
| "axa-button-link": "6.0.2", | ||
| "axa-icon": "7.0.2" | ||
| } | ||
| }, this); | ||
| } | ||
| get showIcon() { | ||
| return this.icon && this.icon !== ARROW_RIGHT; | ||
| } | ||
| get showArrow() { | ||
| return this.icon === ARROW_RIGHT; | ||
| } | ||
| render() { | ||
| var { | ||
| href, | ||
| external, | ||
| size = '', | ||
| motionOff, | ||
| disabled, | ||
| variant = '', | ||
| icon = '' | ||
| } = this; | ||
| var classes = { | ||
| 'a-button-link': true, | ||
| 'a-button-link--large': size === 'large', | ||
| 'a-button-link--small': size === 'small', | ||
| 'a-button-link--motion': !motionOff && !disabled, | ||
| 'a-button-link--secondary': variant === 'secondary', | ||
| 'a-button-link--red': variant === 'red', | ||
| 'a-button-link--inverted': variant.includes('inverted'), | ||
| 'a-button-link--inverted-blue-ocean': variant === 'inverted-blue-ocean', | ||
| 'a-button-link--inverted-red-tosca': variant === 'inverted-red-tosca', | ||
| 'a-button-link--inverted-purple-logan': variant === 'inverted-purple-logan', | ||
| 'a-button-link--inverted-green-viridian': variant === 'inverted-green-viridian', | ||
| 'a-button-link--inverted-blue-teal': variant === 'inverted-blue-teal' | ||
| }; | ||
| return html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n <a\n class=\"", "\"\n href=\"", "\"\n target=\"", "\"\n rel=\"", "\"\n aria-disabled=\"", "\"\n @click=\"", "\"\n >\n <span class=\"a-button-link__flex-wrapper\">\n ", "\n <slot></slot>\n ", "\n </span>\n </a>\n "])), classMap(classes), href, external ? '_blank' : '_top', external ? 'noreferrer noopener' : '', disabled, this.onClick, this.showIcon ? versionedHtml(this)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n <axa-icon class=\"a-button-link__icon\" icon=\"", "\"></axa-icon>\n "])), icon) : '', this.showArrow ? versionedHtml(this)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n <axa-icon\n class=\"a-button-link__arrow js-button-link__arrow\"\n icon=\"arrow-right\"\n ></axa-icon>\n "]))) : ''); | ||
| } | ||
| firstUpdated() { | ||
| this.inlineStyles('blockMouseEventsCss'); | ||
| } | ||
| } | ||
| defineVersioned([AXAButtonLink], { | ||
| "axa-button-link": { | ||
| "axa-button-link": "6.0.2", | ||
| "axa-icon": "7.0.2" | ||
| } | ||
| }); | ||
| export { AXAButtonLink as default }; | ||
| import{html as n,LitElement as t,css as e,unsafeCSS as o}from"lit";import{classMap as r}from"lit/directives/class-map.js";import i from"@axa-ch/icon";const a=n=>!(null==n),l=new Map;[[String,""],[Boolean,!1],[Object,{}],[Array,[]],[Number,0],[Function,()=>{}]].forEach((([n,t])=>{l.set(n,t)}));const s=()=>{},c=n=>{const{constructor:{properties:t}}=n;Object.keys(t).forEach((e=>{const o=t[e],{type:r,converter:i,defaultValue:c}=o;if(!r){if(!i)throw new Error(`<${n.nodeName}> property "${e}" is missing a type!`);return}let u=n[e];a(u)||(u=r===Boolean?n.hasAttribute(e):n.getAttribute(e),a(u)?n[e]=((n,t)=>t===Number?parseFloat(n):t===Function?s:t===Array||t===Object?JSON.parse(n):n)(u,r):void 0===c&&"defaultValue"in o||(n[e]="defaultValue"in o?c:l.get(r)))}))};var u=(n,t)=>{const e=n.toLowerCase();return window.customElements.get(e)||window.customElements.define(e,t),e};const b=(n,t)=>{return`${n}-${e=t,`${e}`.replace(/\./g,"-").replace(/[^A-Za-z0-9-]/g,"")}`;var e},d=(n,t="",e="<")=>`${e}${t}${n}`,k=(n,t,e)=>d(b(n,t),e,"{"),f=(n,t,e)=>n.map((n=>n.split(d(t)).join(k(t,e)).split(d(t,"/")).join(k(t,e,"/")))),p=(n,t,e)=>{const o="string"==typeof t&&t;let r="";return n.forEach((n=>{const i=n instanceof HTMLElement?n.constructor:n,{tagName:a}=i,l=!o&&t[a];if(l){if(!window.customElements.get(a)&&i.versions)throw Error(`'versions' is a reserved class property, but was found in ${a}'s class`);i.versions=l,u(a,i)}let{versions:s}=i;!s&&e&&(s=t[e.constructor.tagName],s[a]=Object.values(s)[0]);const c=o||s[a];r=b(a,c),u(r,class extends i{})})),r},g=t=>(e,...o)=>{const r=t.constructor,[i,a]=(n=>{const{versions:t,tagName:e}=n,o=Object.keys(t).filter((n=>n!==e)).sort(((n,t)=>t.length-n.length));return[o,o.map((n=>t[n]))]})(r);let l=e;for(let n=0,t=i.length;n<t;n++)l=f(l,i[n],a[n]);for(let n=0,t=l.length;n<t;n++)l[n]=l[n].split("{").join("<");return l.raw=l,n(l,...o)};const h={};class v extends t{inlineStyles(n="styles"){const t=this.getRootNode(),e=h[this.tagName]||new WeakMap,o=e.get(t)||{},r=(o.referenceCount||0)+1;if(o.referenceCount=r,e.set(t,r),h[this.tagName]=e,1===r){this.ownerDocument!==t&&(this._rootNode=t);const e=document.createElement("style");let r=this.constructor[n];const i=this.nodeName.toLowerCase(),a=this.constructor.tagName;i!==a&&(r=r.split(a).join(i)),e.textContent=r,e.dataset.name=this.tagName.toLowerCase();(t instanceof ShadowRoot?t:document.head).appendChild(e),o.style=e}e.set(t,o),h[this.tagName]=e}disconnectedCallback(){super.disconnectedCallback();const n=h[this.tagName];if(!n)return;const t=this._rootNode||this.ownerDocument,e=n.get(t)||{},o=(e.referenceCount||0)-1;if(o<1){n.delete(t);const{style:o}=e;o&&o.parentNode&&o.parentNode.removeChild(o)}else e.referenceCount=o,n.set(t,e)}}class m extends v{static get tagName(){return"axa-button-link"}static get styles(){return e` | ||
| ${o(':host {\n display: inline-block;\n vertical-align: bottom;\n}\n\n.a-button-link {\n font-size: 14px;\n letter-spacing: 0.02em;\n line-height: 17px;\n font-family: "Source Sans Pro", Arial, sans-serif;\n position: relative;\n display: inline-block;\n box-sizing: border-box;\n padding: 0 30px;\n margin: 0;\n width: 100%;\n vertical-align: bottom;\n -webkit-hyphens: auto;\n -ms-hyphens: auto;\n hyphens: auto;\n overflow-wrap: break-word;\n word-wrap: break-word;\n text-decoration: none;\n text-transform: uppercase;\n color: #fff;\n background-color: #00008f;\n border: solid 2px #00008f;\n border-bottom-color: #00005b;\n}\n.a-button-link:hover, .a-button-link:active, .a-button-link:focus {\n cursor: pointer;\n text-decoration: none;\n background-color: #00005b;\n border-color: #00005b;\n outline: 0;\n}\n.a-button-link[aria-disabled=true] {\n color: #999;\n background-color: #e5e5e5;\n border-color: #e5e5e5;\n border-bottom-color: #ccc;\n pointer-events: none;\n}\n.a-button-link__flex-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n min-height: 36px;\n height: 25px;\n box-sizing: border-box;\n}\n.a-button-link__icon {\n display: flex;\n margin-right: 10px;\n}\n.a-button-link__arrow {\n display: flex;\n margin-left: 10px;\n}\n\n.a-button-link--large {\n font-size: 16px;\n letter-spacing: 0.02em;\n line-height: 24px;\n font-family: "Source Sans Pro", Arial, sans-serif;\n}\n\n.a-button-link--large .a-button-link__flex-wrapper {\n min-height: 46px;\n}\n\n.a-button-link--small .a-button-link__flex-wrapper {\n min-height: 26px;\n}\n\n.a-button-link--motion {\n z-index: 0;\n overflow: hidden;\n transition: color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;\n}\n.a-button-link--motion::after {\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n display: block;\n width: 0.001px;\n height: 100vw;\n content: "";\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n transition: width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;\n background-color: #00005b;\n}\n.a-button-link--motion:hover, .a-button-link--motion:focus {\n background-color: #00008f;\n color: #fff;\n}\n.a-button-link--motion:hover::after, .a-button-link--motion:focus::after {\n width: 110%;\n background-color: #00005b;\n}\n\n.a-button-link--red {\n background-color: #f07662;\n border-color: #f07662;\n border-bottom-color: #ec4d33;\n}\n.a-button-link--red:hover, .a-button-link--red:active, .a-button-link--red:focus {\n background-color: #ec4d33;\n border-color: #ec4d33;\n}\n.a-button-link--red.a-button-link--motion::after {\n background-color: #ec4d33;\n}\n.a-button-link--red.a-button-link--motion:hover, .a-button-link--red.a-button-link--motion:focus {\n background-color: #f07662;\n color: #fff;\n}\n.a-button-link--red.a-button-link--motion:hover::after, .a-button-link--red.a-button-link--motion:focus::after {\n background-color: #ec4d33;\n}\n\n.a-button-link--secondary {\n background-color: transparent;\n border-bottom-color: #00008f;\n color: #00008f;\n}\n.a-button-link--secondary:hover, .a-button-link--secondary:active, .a-button-link--secondary:focus {\n color: #fff;\n}\n.a-button-link--secondary.a-button-link--motion {\n background-color: transparent;\n}\n\n.a-button-link--inverted {\n background-color: transparent;\n border-color: #fff;\n color: #fff;\n}\n.a-button-link--inverted:hover, .a-button-link--inverted:active, .a-button-link--inverted:focus {\n color: #00005b;\n background-color: #fff;\n border-color: #fff;\n}\n.a-button-link--inverted.a-button-link--motion {\n background-color: transparent;\n}\n.a-button-link--inverted.a-button-link--motion::after {\n background-color: #fff;\n}\n\n.a-button-link--inverted-blue-ocean:hover, .a-button-link--inverted-blue-ocean:active, .a-button-link--inverted-blue-ocean:focus {\n color: #4976ba;\n}\n\n.a-button-link--inverted-red-tosca:hover, .a-button-link--inverted-red-tosca:active, .a-button-link--inverted-red-tosca:focus {\n color: #914146;\n}\n\n.a-button-link--inverted-purple-logan:hover, .a-button-link--inverted-purple-logan:active, .a-button-link--inverted-purple-logan:focus {\n color: #9190ac;\n}\n\n.a-button-link--inverted-green-viridian:hover, .a-button-link--inverted-green-viridian:active, .a-button-link--inverted-green-viridian:focus {\n color: #668980;\n}\n\n.a-button-link--inverted-blue-teal:hover, .a-button-link--inverted-blue-teal:active, .a-button-link--inverted-blue-teal:focus {\n color: #027180;\n}')} | ||
| `}static get blockMouseEventsCss(){return"axa-button-link {\n position: relative;\n}\naxa-button-link[disabled] {\n pointer-events: none;\n}"}static get properties(){return{href:{type:String},external:{type:Boolean},variant:{type:String},icon:{type:String},size:{type:String},motionOff:{type:Boolean},disabled:{type:Boolean,reflect:!0},onClick:{type:Function,attribute:!1}}}constructor(){super(),c(this),p([i],{"axa-button-link":{"axa-button-link":"7.0.0","axa-icon":"8.0.0"}},this)}get showIcon(){return this.icon&&"arrow-right"!==this.icon}get showArrow(){return"arrow-right"===this.icon}render(){const{href:t,external:e,size:o="",motionOff:i,disabled:a,variant:l="",icon:s=""}=this,c={"a-button-link":!0,"a-button-link--large":"large"===o,"a-button-link--small":"small"===o,"a-button-link--motion":!i&&!a,"a-button-link--secondary":"secondary"===l,"a-button-link--red":"red"===l,"a-button-link--inverted":l.includes("inverted"),"a-button-link--inverted-blue-ocean":"inverted-blue-ocean"===l,"a-button-link--inverted-red-tosca":"inverted-red-tosca"===l,"a-button-link--inverted-purple-logan":"inverted-purple-logan"===l,"a-button-link--inverted-green-viridian":"inverted-green-viridian"===l,"a-button-link--inverted-blue-teal":"inverted-blue-teal"===l};return n` | ||
| <a | ||
| class="${r(c)}" | ||
| href="${t}" | ||
| target="${e?"_blank":"_top"}" | ||
| rel="${e?"noreferrer noopener":""}" | ||
| aria-disabled="${a}" | ||
| @click="${this.onClick}" | ||
| > | ||
| <span class="a-button-link__flex-wrapper"> | ||
| ${this.showIcon?g(this)` | ||
| <axa-icon class="a-button-link__icon" icon="${s}"></axa-icon> | ||
| `:""} | ||
| <slot></slot> | ||
| ${this.showArrow?g(this)` | ||
| <axa-icon | ||
| class="a-button-link__arrow js-button-link__arrow" | ||
| icon="arrow-right" | ||
| ></axa-icon> | ||
| `:""} | ||
| </span> | ||
| </a> | ||
| `}firstUpdated(){this.inlineStyles("blockMouseEventsCss")}}p([m],{"axa-button-link":{"axa-button-link":"7.0.0","axa-icon":"8.0.0"}});export{m as default}; |
@@ -15,3 +15,4 @@ import React from 'react'; | ||
| export interface AXAButtonLinkProps { | ||
| export interface AXAButtonLinkProps | ||
| extends React.LinkHTMLAttributes<HTMLLinkElement> { | ||
| href?: string; | ||
@@ -28,2 +29,3 @@ external?: boolean; | ||
| slot?: string; | ||
| children?: React.ReactNode; | ||
| } | ||
@@ -30,0 +32,0 @@ |
@@ -1,650 +0,25 @@ | ||
| import val from '@skatejs/val'; | ||
| import { html, LitElement, css, unsafeCSS } from 'lit'; | ||
| import { classMap } from 'lit/directives/class-map.js'; | ||
| import AXAIcon from '@axa-ch/icon'; | ||
| function ownKeys(object, enumerableOnly) { | ||
| var keys = Object.keys(object); | ||
| if (Object.getOwnPropertySymbols) { | ||
| var symbols = Object.getOwnPropertySymbols(object); | ||
| enumerableOnly && (symbols = symbols.filter(function (sym) { | ||
| return Object.getOwnPropertyDescriptor(object, sym).enumerable; | ||
| })), keys.push.apply(keys, symbols); | ||
| } | ||
| return keys; | ||
| } | ||
| function _objectSpread2(target) { | ||
| for (var i = 1; i < arguments.length; i++) { | ||
| var source = null != arguments[i] ? arguments[i] : {}; | ||
| i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { | ||
| _defineProperty(target, key, source[key]); | ||
| }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { | ||
| Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); | ||
| }); | ||
| } | ||
| return target; | ||
| } | ||
| function _defineProperty(obj, key, value) { | ||
| if (key in obj) { | ||
| Object.defineProperty(obj, key, { | ||
| value: value, | ||
| enumerable: true, | ||
| configurable: true, | ||
| writable: true | ||
| }); | ||
| } else { | ||
| obj[key] = value; | ||
| } | ||
| return obj; | ||
| } | ||
| function _objectWithoutPropertiesLoose(source, excluded) { | ||
| if (source == null) return {}; | ||
| var target = {}; | ||
| var sourceKeys = Object.keys(source); | ||
| var key, i; | ||
| for (i = 0; i < sourceKeys.length; i++) { | ||
| key = sourceKeys[i]; | ||
| if (excluded.indexOf(key) >= 0) continue; | ||
| target[key] = source[key]; | ||
| } | ||
| return target; | ||
| } | ||
| function _objectWithoutProperties(source, excluded) { | ||
| if (source == null) return {}; | ||
| var target = _objectWithoutPropertiesLoose(source, excluded); | ||
| var key, i; | ||
| if (Object.getOwnPropertySymbols) { | ||
| var sourceSymbolKeys = Object.getOwnPropertySymbols(source); | ||
| for (i = 0; i < sourceSymbolKeys.length; i++) { | ||
| key = sourceSymbolKeys[i]; | ||
| if (excluded.indexOf(key) >= 0) continue; | ||
| if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; | ||
| target[key] = source[key]; | ||
| } | ||
| } | ||
| return target; | ||
| } | ||
| function _taggedTemplateLiteral(strings, raw) { | ||
| if (!raw) { | ||
| raw = strings.slice(0); | ||
| } | ||
| return Object.freeze(Object.defineProperties(strings, { | ||
| raw: { | ||
| value: Object.freeze(raw) | ||
| } | ||
| })); | ||
| } | ||
| var defineOnce = ((name, customElementClass) => { | ||
| // normalize name since HTML tag names don't allow case distinction | ||
| var lowerCaseName = name.toLowerCase(); // custom element not already registered? | ||
| if (!window.customElements.get(lowerCaseName)) { | ||
| // no, register it now | ||
| window.customElements.define(lowerCaseName, customElementClass); | ||
| } // return its name as a convenience | ||
| return lowerCaseName; | ||
| }); | ||
| var RESERVED_CHARACTER = '{'; // not allowed in HTML tags or their attributes ... | ||
| // and also not part of static template strings due to ${...} syntax! | ||
| // helper functions | ||
| var toKebabCase = dottedVersionString => "".concat(dottedVersionString).replace(/\./g, '-').replace(/[^A-Za-z0-9-]/g, ''); | ||
| var versionedTag = (tagName, version) => "".concat(tagName, "-").concat(toKebabCase(version)); | ||
| var extractDependencies = componentClass => { | ||
| var { | ||
| versions, | ||
| tagName | ||
| } = componentClass; // extract all dependencies... | ||
| var dependencies = Object.keys(versions) // ... by comparing with master-component tag name | ||
| .filter(name => name !== tagName) // ... and sorting longest-first (e.g. axa-button-link comes before axa-button) | ||
| .sort((a, b) => b.length - a.length); // pair the list of dependency tag names with their versions | ||
| return [dependencies, dependencies.map(_tagName => versions[_tagName])]; | ||
| }; | ||
| var oldTag = function oldTag(tagName) { | ||
| var closing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; | ||
| var openingBracket = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '<'; | ||
| return "".concat(openingBracket).concat(closing).concat(tagName); | ||
| }; // How to make a new tag? It's tempting to just append the version info. | ||
| // However, we don't want to rewrite tags more than once: given axa-button-link in version 6.3.4 | ||
| // and axa-button in version 5.0.9, we DONT'T WANT | ||
| // <axa-button-link =1> <axa-button-link-6-3-4 =2> <axa-button-5-0-9-link-6-3-4. | ||
| // So, the simplest solution replaces a rewritten tag in such a way that it does not START | ||
| // like any other tag, using a reserved character '{'. To continue with our example, we might have | ||
| // <axa-button-link =1> {axa-button-link-6-3-4. Then the erroneous rewriting step =2> can no longer match. | ||
| // Of course, in the end we need a bulk replacement of the '{'s by their original '<'s, which is simple. | ||
| var newTag = (tagName, aVersion, closing) => oldTag(versionedTag(tagName, aVersion), closing, RESERVED_CHARACTER); // Example: someStrings = ['<div><axa-dropdown .items="','" </axa-dropdown></div>'] | ||
| // aTagname = 'axa-dropdown', aVersion = '7.0.2' | ||
| // | ||
| // Rewritten as ['<div><axa-dropdown-7-0-2 .items="','" </axa-dropdown-7-0-2></div>']. | ||
| // | ||
| // Note: this uses the split-join technique to perform global string substitution | ||
| // without needing the special-character escaping necessary for | ||
| // a reg-exp-based alternative (the latter is marginally faster, but our strings here are short) | ||
| var rewrite = (someStrings, aTagName, aVersion) => someStrings.map(string => string.split(oldTag(aTagName)).join(newTag(aTagName, aVersion)).split(oldTag(aTagName, '/')).join(newTag(aTagName, aVersion, '/'))); // /// | ||
| // API functions | ||
| // /// | ||
| // examples: | ||
| // defineVersioned([AXADatepicker], __ VERSION_INFO__); // main component | ||
| // defineVersioned([AXADropdown], __ VERSION_INFO__, this); // dependent component | ||
| // defineVersioned([AXACheckbox], 'rsv'); // custom version | ||
| var defineVersioned = (dependencies, versionInfo, parentInstance) => { | ||
| // set up | ||
| var customVersion = typeof versionInfo === 'string' && versionInfo; | ||
| var versionedTagName = ''; // process all dependant components that it lists... | ||
| dependencies.forEach(dependency => { | ||
| var componentClass = dependency instanceof HTMLElement ? dependency.constructor : dependency; // extract each dependant component's version | ||
| var { | ||
| tagName | ||
| } = componentClass; | ||
| var externalVersion = !customVersion && versionInfo[tagName]; // ordinary, non-POD versioning? | ||
| if (externalVersion) { | ||
| // yes, first time versioning/registration of this component, but its class | ||
| // contains a PL-reserved 'versions' property? | ||
| if (!window.customElements.get(tagName) && componentClass.versions) { | ||
| // yes, this class is wrongly implemented - premature exit | ||
| throw Error("'versions' is a reserved class property, but was found in ".concat(tagName, "'s class")); | ||
| } // inject version info into component-defining class - this helps for live debugging | ||
| componentClass.versions = externalVersion; // define its *unversioned*-tag variant first | ||
| defineOnce(tagName, componentClass); | ||
| } // extract each dependant component's version, | ||
| var { | ||
| versions | ||
| } = componentClass; // If there is no version found, use the wrapping custom-element's version | ||
| if (!versions && parentInstance) { | ||
| // returns an array containing one object, which contains the tagname of the parent as key and its deployed version as value | ||
| versions = versionInfo[parentInstance.constructor.tagName]; // extract the one item in the versions array and get only the version as string | ||
| // eslint-disable-next-line prefer-destructuring | ||
| versions[tagName] = Object.values(versions)[0]; | ||
| } // assembling a new, versioned name, | ||
| var version = customVersion || versions[tagName]; | ||
| versionedTagName = versionedTag(tagName, version); // and redundantly defining | ||
| // versionedTagName |-> dependentComponentClass' | ||
| // in parallel to the existing unversioned definition | ||
| // tagName |-> dependentComponentClass | ||
| // | ||
| // Note: the class expression formally creates a *new* dependentComponentClass' with identical behaviour, | ||
| // which is needed to get around a bi-uniqueness constraint imposed by the | ||
| // custom-elements registry, cf. https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define | ||
| // under section Exceptions:NotSupportedError) | ||
| defineOnce(versionedTagName, class extends componentClass {}); | ||
| }); | ||
| return versionedTagName; // for convenience in single-component custom-versioned definitions | ||
| }; // prettier-ignore | ||
| var versionedHtml = componentInstance => function (strings) { | ||
| // derive class from instance | ||
| var componentClass = componentInstance.constructor; // extract dependency info by looking at versions of component | ||
| var [tagNames, versions] = extractDependencies(componentClass); // rewrite incoming array of static parts of template literals | ||
| // in such a way that tags of dependent components are versioned: | ||
| var newStrings = strings; // 1. rewriting proper, turning tags into versioned ones with funny initial brackets (see newTag(...) above) | ||
| for (var i = 0, n = tagNames.length; i < n; i++) { | ||
| newStrings = rewrite(newStrings, tagNames[i], versions[i]); | ||
| } // 2. finish rewriting by converting funny initial brackets back to standard ones | ||
| for (var _i = 0, _n = newStrings.length; _i < _n; _i++) { | ||
| newStrings[_i] = newStrings[_i].split(RESERVED_CHARACTER).join('<'); | ||
| } // fake a proper TemplateResult because lit now checks the .raw property | ||
| // (cf. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#raw_strings) | ||
| newStrings.raw = newStrings; // let lit-html see the rewritten static parts together with the | ||
| // unchanged dynamic arg(ument)s | ||
| for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| args[_key - 1] = arguments[_key]; | ||
| } | ||
| return html(newStrings, ...args); | ||
| }; | ||
| var _excluded = ["children"]; | ||
| var isDefined = value => !(value === undefined || value === null); | ||
| var pascalCase = hyphenatedName => hyphenatedName.split('-').map(part => part.charAt(0).toUpperCase() + part.slice(1)).join(''); // generic defaults (will be applied in the absence of explicit 'defaultValue') | ||
| // (IE11 does not support new Map([iterable]), so we have to initialize the map | ||
| // with .set calls for each key) | ||
| var DEFAULT_VALUE_OF_TYPE = new Map(); | ||
| [[String, ''], [Boolean, false], [Object, {}], [Array, []], [Number, 0], [Function, () => {}]].forEach(_ref => { | ||
| var [key, value] = _ref; | ||
| DEFAULT_VALUE_OF_TYPE.set(key, value); | ||
| }); | ||
| var emptyFunction = () => {}; // convert *attribute* value | ||
| var convert = (value, type) => { | ||
| if (type === Number) { | ||
| return parseFloat(value); | ||
| } | ||
| if (type === Function) { | ||
| // corner case: inline event handlers like onchange="alert(event)" cannot be reliably converted from string, | ||
| // so just return an empty function s.t. event-handler invocations in component code don't throw exceptions | ||
| // (components are responsible for firing synthetic events on their root element instead to trigger expected | ||
| // inline event handlers) | ||
| return emptyFunction; | ||
| } | ||
| return type === Array || type === Object ? JSON.parse(value) : value; | ||
| }; | ||
| var applyDefaults = ceInst => { | ||
| var { | ||
| constructor: { | ||
| properties | ||
| } | ||
| } = ceInst; // get all properties of the custom element and loop over each key | ||
| Object.keys(properties).forEach(property => { | ||
| // extract default value and property type | ||
| var propertyValue = properties[property]; | ||
| var { | ||
| type, | ||
| converter, | ||
| defaultValue | ||
| } = propertyValue; | ||
| if (!type) { | ||
| if (!converter) { | ||
| throw new Error("<".concat(ceInst.nodeName, "> property \"").concat(property, "\" is missing a type!")); | ||
| } | ||
| return; | ||
| } // respect property values defined before CE is constructed | ||
| var value = ceInst[property]; | ||
| if (isDefined(value)) { | ||
| return; | ||
| } // Boolean attributes in HTML are true if present, false otherwise. | ||
| // For all other types, get their value as string... | ||
| value = type === Boolean ? ceInst.hasAttribute(property) : ceInst.getAttribute(property); // .. and if defined | ||
| if (isDefined(value)) { | ||
| // convert it | ||
| ceInst[property] = convert(value, type); | ||
| return; | ||
| } // otherwise, apply default | ||
| // make sure the set value() function is never triggered when defaultValue | ||
| // is undefined otherwise the isControlled flag and firstTime flag are messed up in | ||
| // some components containing controlledness. Writing undefined again on value counts as change | ||
| if (defaultValue === undefined && 'defaultValue' in propertyValue) { | ||
| return; | ||
| } // component author explicitly specified a default value for this property? | ||
| // (This allows *all* values as defaults, *including* undefined. The latter is | ||
| // the proper default for 'value' properties in React's controlled-component mode.) | ||
| // no, derive it from general per-type defaults | ||
| ceInst[property] = 'defaultValue' in propertyValue // component author wants full control of their default value? | ||
| ? defaultValue // yes, apply it | ||
| : DEFAULT_VALUE_OF_TYPE.get(type); | ||
| }); | ||
| }; | ||
| var transformStylesObjectToString = value => { | ||
| // {width: "500px"} -> width:500px; | ||
| var styleString = Object.keys(value).reduce((prev, curr) => { | ||
| var previousValue = prev; | ||
| return "".concat(previousValue += curr.split(/(?=[A-Z])/).join('-').toLowerCase(), ":").concat(value[curr], ";"); | ||
| }, ''); | ||
| return styleString; | ||
| }; | ||
| var distributeProperties = (properties, componentClass) => { | ||
| // initialize | ||
| var attrs = {}; | ||
| var props = {}; | ||
| var map; // iterate over all properties | ||
| Object.keys(properties).forEach(name => { | ||
| var value = properties[name]; // classify property by type to select correct map object | ||
| // (note that unregistered properties are classified as attr(ibute)s via their undefined .type) | ||
| var type; | ||
| var declaredProperty = componentClass.properties[name] || {}; | ||
| var { | ||
| type: declaredType | ||
| } = declaredProperty; | ||
| var looksLikeAnEventHandler = name.indexOf('on') === 0 && // starts with on... | ||
| name.charAt(2) === name.charAt(2).toUpperCase(); // continues with uppercase-letter, i.e. camelCase | ||
| if (looksLikeAnEventHandler) { | ||
| type = Function; | ||
| } else if (name === 'className') { | ||
| type = 'className'; | ||
| } else { | ||
| type = declaredType; | ||
| } | ||
| switch (type) { | ||
| case 'className': | ||
| case Array: | ||
| case Object: | ||
| case Function: | ||
| case Boolean: | ||
| map = props; | ||
| break; | ||
| default: | ||
| map = declaredType ? props : attrs; | ||
| } // map property name to value *unless* value is undefined | ||
| if (value !== undefined) { | ||
| if (name === 'style') { | ||
| map[name] = transformStylesObjectToString(value); | ||
| } else { | ||
| map[name] = value; | ||
| } | ||
| } | ||
| }); | ||
| return { | ||
| attrs, | ||
| props | ||
| }; | ||
| }; | ||
| var withReact = ((createElement, componentClass, version) => { | ||
| var { | ||
| tagName | ||
| } = componentClass; | ||
| var finalTagName = version ? defineVersioned([componentClass], version) : tagName; | ||
| var displayName = pascalCase(finalTagName); | ||
| var reactStatelessComponent = _ref2 => { | ||
| var { | ||
| children | ||
| } = _ref2, | ||
| properties = _objectWithoutProperties(_ref2, _excluded); | ||
| var { | ||
| attrs, | ||
| props | ||
| } = distributeProperties(properties, componentClass); | ||
| return val(createElement)(finalTagName, _objectSpread2({ | ||
| isReact: true, | ||
| attrs | ||
| }, props), children); | ||
| }; // displayName is important for React testing (e.g. enzyme) and Chrome DevTools plugins | ||
| reactStatelessComponent.displayName = displayName; | ||
| return reactStatelessComponent; | ||
| }); | ||
| var buttonLinkCSS = ":host {\n display: inline-block;\n vertical-align: bottom;\n}\n\n.a-button-link {\n font-size: 14px;\n letter-spacing: 0.02em;\n line-height: 17px;\n font-family: \"Source Sans Pro\", Arial, sans-serif;\n position: relative;\n display: inline-block;\n box-sizing: border-box;\n padding: 0 30px;\n margin: 0;\n width: 100%;\n vertical-align: bottom;\n -webkit-hyphens: auto;\n -ms-hyphens: auto;\n hyphens: auto;\n overflow-wrap: break-word;\n word-wrap: break-word;\n text-decoration: none;\n text-transform: uppercase;\n color: #fff;\n background-color: #00008f;\n border: solid 2px #00008f;\n border-bottom-color: #00005b;\n}\n.a-button-link:hover, .a-button-link:active, .a-button-link:focus {\n cursor: pointer;\n text-decoration: none;\n background-color: #00005b;\n border-color: #00005b;\n outline: 0;\n}\n.a-button-link[aria-disabled=true] {\n color: #999;\n background-color: #e5e5e5;\n border-color: #e5e5e5;\n border-bottom-color: #ccc;\n pointer-events: none;\n}\n.a-button-link__flex-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n min-height: 36px;\n height: 25px;\n box-sizing: border-box;\n}\n.a-button-link__icon {\n display: flex;\n margin-right: 10px;\n}\n.a-button-link__arrow {\n display: flex;\n margin-left: 10px;\n}\n\n.a-button-link--large {\n font-size: 16px;\n letter-spacing: 0.02em;\n line-height: 24px;\n font-family: \"Source Sans Pro\", Arial, sans-serif;\n}\n\n.a-button-link--large .a-button-link__flex-wrapper {\n min-height: 46px;\n}\n\n.a-button-link--small .a-button-link__flex-wrapper {\n min-height: 26px;\n}\n\n.a-button-link--motion {\n z-index: 0;\n overflow: hidden;\n transition: color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;\n}\n.a-button-link--motion::after {\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n display: block;\n width: 0.001px;\n height: 100vw;\n content: \"\";\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n transition: width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;\n background-color: #00005b;\n}\n.a-button-link--motion:hover, .a-button-link--motion:focus {\n background-color: #00008f;\n color: #fff;\n}\n.a-button-link--motion:hover::after, .a-button-link--motion:focus::after {\n width: 110%;\n background-color: #00005b;\n}\n\n.a-button-link--red {\n background-color: #f07662;\n border-color: #f07662;\n border-bottom-color: #ec4d33;\n}\n.a-button-link--red:hover, .a-button-link--red:active, .a-button-link--red:focus {\n background-color: #ec4d33;\n border-color: #ec4d33;\n}\n.a-button-link--red.a-button-link--motion::after {\n background-color: #ec4d33;\n}\n.a-button-link--red.a-button-link--motion:hover, .a-button-link--red.a-button-link--motion:focus {\n background-color: #f07662;\n color: #fff;\n}\n.a-button-link--red.a-button-link--motion:hover::after, .a-button-link--red.a-button-link--motion:focus::after {\n background-color: #ec4d33;\n}\n\n.a-button-link--secondary {\n background-color: transparent;\n border-bottom-color: #00008f;\n color: #00008f;\n}\n.a-button-link--secondary:hover, .a-button-link--secondary:active, .a-button-link--secondary:focus {\n color: #fff;\n}\n.a-button-link--secondary.a-button-link--motion {\n background-color: transparent;\n}\n\n.a-button-link--inverted {\n background-color: transparent;\n border-color: #fff;\n color: #fff;\n}\n.a-button-link--inverted:hover, .a-button-link--inverted:active, .a-button-link--inverted:focus {\n color: #00005b;\n background-color: #fff;\n border-color: #fff;\n}\n.a-button-link--inverted.a-button-link--motion {\n background-color: transparent;\n}\n.a-button-link--inverted.a-button-link--motion::after {\n background-color: #fff;\n}\n\n.a-button-link--inverted-blue-ocean:hover, .a-button-link--inverted-blue-ocean:active, .a-button-link--inverted-blue-ocean:focus {\n color: #4976ba;\n}\n\n.a-button-link--inverted-red-tosca:hover, .a-button-link--inverted-red-tosca:active, .a-button-link--inverted-red-tosca:focus {\n color: #914146;\n}\n\n.a-button-link--inverted-purple-logan:hover, .a-button-link--inverted-purple-logan:active, .a-button-link--inverted-purple-logan:focus {\n color: #9190ac;\n}\n\n.a-button-link--inverted-green-viridian:hover, .a-button-link--inverted-green-viridian:active, .a-button-link--inverted-green-viridian:focus {\n color: #668980;\n}\n\n.a-button-link--inverted-blue-teal:hover, .a-button-link--inverted-blue-teal:active, .a-button-link--inverted-blue-teal:focus {\n color: #027180;\n}"; | ||
| var childStyles = "axa-button-link {\n position: relative;\n}\naxa-button-link[disabled] {\n pointer-events: none;\n}"; | ||
| /* base class for non-ShadowDom components */ | ||
| // map: customElementTagName |-> (ownerDocument |-> {referenceCount,style}) | ||
| var crossTagReferenceCounts = {}; // BASE CLASS | ||
| class InlineStyles extends LitElement { | ||
| /* append inline styles iff first instance in current document/ShadowRoot */ | ||
| inlineStyles() { | ||
| var staticProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'styles'; | ||
| // get this node's document or ShadowRoot, to be used as map key to attach | ||
| // reference-count metadata to | ||
| // N.B. getRootNode needs polyfill for non-Chromium Edge / IE | ||
| // (https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode) | ||
| var root = this.getRootNode(); // retrieve all reference counts by tag name, initializing as needed | ||
| // with WeakMap(). WeakMap (supported by IE11) acts as defense-in-depth | ||
| // against memory leaks if disconnectedCallback is never called | ||
| // (allowed by the spec). | ||
| var referenceCounts = crossTagReferenceCounts[this.tagName] || new WeakMap(); // one more reference, caused by this instance | ||
| var info = referenceCounts.get(root) || {}; | ||
| var referenceCount = (info.referenceCount || 0) + 1; | ||
| info.referenceCount = referenceCount; // persist reference-count metadata | ||
| referenceCounts.set(root, referenceCount); | ||
| crossTagReferenceCounts[this.tagName] = referenceCounts; // no style sheet attached sofar? | ||
| if (referenceCount === 1) { | ||
| // remember our root in the instance, if not available natively | ||
| // (ownerDocument), for DOM-removal-time cleanup. | ||
| if (this.ownerDocument !== root) { | ||
| this._rootNode = root; | ||
| } // provision inline style sheet with *string* content | ||
| // from the class property 'styles' | ||
| var style = document.createElement('style'); | ||
| var cssAsString = this.constructor[staticProps]; // version the CSS rule selectors, if component | ||
| // does not bear its generic name | ||
| var versionedComponentName = this.nodeName.toLowerCase(); // e.g. axa-datepicker-7-0-2 | ||
| var genericComponentName = this.constructor.tagName; // e.g. axa-datepicker | ||
| if (versionedComponentName !== genericComponentName) { | ||
| // in non-ShadowDOM components, the leftmost rule-selector item | ||
| // is the component name itself, serving as a poor-man's rule scoping construct. | ||
| // E.g. datepicker rules are assumed to look like this: | ||
| // axa-datepicker .class1 .... classN { ... } | ||
| cssAsString = cssAsString.split(genericComponentName).join(versionedComponentName); // now, after the above string-to-string transformation they look like this: | ||
| // axa-datepicker-7-0-2 .class1 .... classN { ... } | ||
| } | ||
| style.textContent = cssAsString; | ||
| style.dataset.name = this.tagName.toLowerCase(); // for testing/debugging purposes | ||
| // append it at the right place, *outside* of this instance's children | ||
| // eslint-disable-next-line no-undef | ||
| var parent = root instanceof ShadowRoot ? root : document.head; | ||
| parent.appendChild(style); | ||
| info.style = style; | ||
| } // persist reference-count metadata | ||
| referenceCounts.set(root, info); | ||
| crossTagReferenceCounts[this.tagName] = referenceCounts; | ||
| } | ||
| /* DOM-removal cleanup in module globals */ | ||
| disconnectedCallback() { | ||
| super.disconnectedCallback(); // if applicable, prepare reference-count metadata | ||
| var referenceCounts = crossTagReferenceCounts[this.tagName]; | ||
| if (!referenceCounts) { | ||
| return; | ||
| } | ||
| var root = this._rootNode || this.ownerDocument; | ||
| var info = referenceCounts.get(root) || {}; | ||
| var referenceCount = (info.referenceCount || 0) - 1; // remove or update reference-count metadata | ||
| if (referenceCount < 1) { | ||
| referenceCounts.delete(root); // give an early hint to GC | ||
| var { | ||
| style | ||
| } = info; | ||
| if (style && style.parentNode) { | ||
| style.parentNode.removeChild(style); // remove style node as well | ||
| } | ||
| } else { | ||
| info.referenceCount = referenceCount; | ||
| referenceCounts.set(root, info); | ||
| } | ||
| } | ||
| } | ||
| var _templateObject, _templateObject2, _templateObject3, _templateObject4; | ||
| var ARROW_RIGHT = 'arrow-right'; | ||
| class AXAButtonLink extends InlineStyles { | ||
| static get tagName() { | ||
| return 'axa-button-link'; | ||
| } | ||
| static get styles() { | ||
| return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n "])), unsafeCSS(buttonLinkCSS)); | ||
| } // Parent class InlineStyles needs a static method to retrive styles | ||
| // name of such method is passed when calling: this.inlineStyles('resetHeadingCss'); | ||
| static get blockMouseEventsCss() { | ||
| return childStyles; | ||
| } | ||
| static get properties() { | ||
| return { | ||
| href: { | ||
| type: String | ||
| }, | ||
| external: { | ||
| type: Boolean | ||
| }, | ||
| // secondary, red, inverted, inverted-blue-ocean, inverted-red-tosca, inverted-purple-logan, inverted-green-viridian, inverted-blue-teal | ||
| variant: { | ||
| type: String | ||
| }, | ||
| icon: { | ||
| type: String | ||
| }, | ||
| size: { | ||
| type: String | ||
| }, | ||
| motionOff: { | ||
| type: Boolean | ||
| }, | ||
| disabled: { | ||
| type: Boolean, | ||
| reflect: true | ||
| }, | ||
| onClick: { | ||
| type: Function, | ||
| attribute: false | ||
| } | ||
| }; | ||
| } | ||
| constructor() { | ||
| super(); | ||
| applyDefaults(this); | ||
| defineVersioned([AXAIcon], { | ||
| "axa-button-link": { | ||
| "axa-button-link": "6.0.2", | ||
| "axa-icon": "7.0.2" | ||
| } | ||
| }, this); | ||
| } | ||
| get showIcon() { | ||
| return this.icon && this.icon !== ARROW_RIGHT; | ||
| } | ||
| get showArrow() { | ||
| return this.icon === ARROW_RIGHT; | ||
| } | ||
| render() { | ||
| var { | ||
| href, | ||
| external, | ||
| size = '', | ||
| motionOff, | ||
| disabled, | ||
| variant = '', | ||
| icon = '' | ||
| } = this; | ||
| var classes = { | ||
| 'a-button-link': true, | ||
| 'a-button-link--large': size === 'large', | ||
| 'a-button-link--small': size === 'small', | ||
| 'a-button-link--motion': !motionOff && !disabled, | ||
| 'a-button-link--secondary': variant === 'secondary', | ||
| 'a-button-link--red': variant === 'red', | ||
| 'a-button-link--inverted': variant.includes('inverted'), | ||
| 'a-button-link--inverted-blue-ocean': variant === 'inverted-blue-ocean', | ||
| 'a-button-link--inverted-red-tosca': variant === 'inverted-red-tosca', | ||
| 'a-button-link--inverted-purple-logan': variant === 'inverted-purple-logan', | ||
| 'a-button-link--inverted-green-viridian': variant === 'inverted-green-viridian', | ||
| 'a-button-link--inverted-blue-teal': variant === 'inverted-blue-teal' | ||
| }; | ||
| return html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n <a\n class=\"", "\"\n href=\"", "\"\n target=\"", "\"\n rel=\"", "\"\n aria-disabled=\"", "\"\n @click=\"", "\"\n >\n <span class=\"a-button-link__flex-wrapper\">\n ", "\n <slot></slot>\n ", "\n </span>\n </a>\n "])), classMap(classes), href, external ? '_blank' : '_top', external ? 'noreferrer noopener' : '', disabled, this.onClick, this.showIcon ? versionedHtml(this)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n <axa-icon class=\"a-button-link__icon\" icon=\"", "\"></axa-icon>\n "])), icon) : '', this.showArrow ? versionedHtml(this)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n <axa-icon\n class=\"a-button-link__arrow js-button-link__arrow\"\n icon=\"arrow-right\"\n ></axa-icon>\n "]))) : ''); | ||
| } | ||
| firstUpdated() { | ||
| this.inlineStyles('blockMouseEventsCss'); | ||
| } | ||
| } | ||
| defineVersioned([AXAButtonLink], { | ||
| "axa-button-link": { | ||
| "axa-button-link": "6.0.2", | ||
| "axa-icon": "7.0.2" | ||
| } | ||
| }); | ||
| var index_react = ((createElement, version) => withReact(createElement, AXAButtonLink, version)); | ||
| export { index_react as default }; | ||
| import n from"@skatejs/val";import{html as t,LitElement as e,css as o,unsafeCSS as r}from"lit";import{classMap as a}from"lit/directives/class-map.js";import i from"@axa-ch/icon";var l=(n,t)=>{const e=n.toLowerCase();return window.customElements.get(e)||window.customElements.define(e,t),e};const s=(n,t)=>{return`${n}-${e=t,`${e}`.replace(/\./g,"-").replace(/[^A-Za-z0-9-]/g,"")}`;var e},c=(n,t="",e="<")=>`${e}${t}${n}`,u=(n,t,e)=>c(s(n,t),e,"{"),b=(n,t,e)=>n.map((n=>n.split(c(t)).join(u(t,e)).split(c(t,"/")).join(u(t,e,"/")))),d=(n,t,e)=>{const o="string"==typeof t&&t;let r="";return n.forEach((n=>{const a=n instanceof HTMLElement?n.constructor:n,{tagName:i}=a,c=!o&&t[i];if(c){if(!window.customElements.get(i)&&a.versions)throw Error(`'versions' is a reserved class property, but was found in ${i}'s class`);a.versions=c,l(i,a)}let{versions:u}=a;!u&&e&&(u=t[e.constructor.tagName],u[i]=Object.values(u)[0]);const b=o||u[i];r=s(i,b),l(r,class extends a{})})),r},k=n=>(e,...o)=>{const r=n.constructor,[a,i]=(n=>{const{versions:t,tagName:e}=n,o=Object.keys(t).filter((n=>n!==e)).sort(((n,t)=>t.length-n.length));return[o,o.map((n=>t[n]))]})(r);let l=e;for(let n=0,t=a.length;n<t;n++)l=b(l,a[n],i[n]);for(let n=0,t=l.length;n<t;n++)l[n]=l[n].split("{").join("<");return l.raw=l,t(l,...o)},p=(n,t)=>{const e={},o={};let r;return Object.keys(n).forEach((a=>{const i=n[a];let l;const s=t.properties[a]||{},{type:c}=s;switch(l=0===a.indexOf("on")&&a.charAt(2)===a.charAt(2).toUpperCase()?Function:"className"===a?"className":c,l){case"className":case Array:case Object:case Function:case Boolean:r=o;break;default:r=c?o:e}void 0!==i&&(r[a]="style"===a?(n=>Object.keys(n).reduce(((t,e)=>{let o=t;return`${o+=e.split(/(?=[A-Z])/).join("-").toLowerCase()}:${n[e]};`}),""))(i):i)})),{attrs:e,props:o}};const f=n=>!(null==n),h=new Map;[[String,""],[Boolean,!1],[Object,{}],[Array,[]],[Number,0],[Function,()=>{}]].forEach((([n,t])=>{h.set(n,t)}));const g=()=>{},v=n=>{const{constructor:{properties:t}}=n;Object.keys(t).forEach((e=>{const o=t[e],{type:r,converter:a,defaultValue:i}=o;if(!r){if(!a)throw new Error(`<${n.nodeName}> property "${e}" is missing a type!`);return}let l=n[e];f(l)||(l=r===Boolean?n.hasAttribute(e):n.getAttribute(e),f(l)?n[e]=((n,t)=>t===Number?parseFloat(n):t===Function?g:t===Array||t===Object?JSON.parse(n):n)(l,r):void 0===i&&"defaultValue"in o||(n[e]="defaultValue"in o?i:h.get(r)))}))};const m={};class x extends e{inlineStyles(n="styles"){const t=this.getRootNode(),e=m[this.tagName]||new WeakMap,o=e.get(t)||{},r=(o.referenceCount||0)+1;if(o.referenceCount=r,e.set(t,r),m[this.tagName]=e,1===r){this.ownerDocument!==t&&(this._rootNode=t);const e=document.createElement("style");let r=this.constructor[n];const a=this.nodeName.toLowerCase(),i=this.constructor.tagName;a!==i&&(r=r.split(i).join(a)),e.textContent=r,e.dataset.name=this.tagName.toLowerCase();(t instanceof ShadowRoot?t:document.head).appendChild(e),o.style=e}e.set(t,o),m[this.tagName]=e}disconnectedCallback(){super.disconnectedCallback();const n=m[this.tagName];if(!n)return;const t=this._rootNode||this.ownerDocument,e=n.get(t)||{},o=(e.referenceCount||0)-1;if(o<1){n.delete(t);const{style:o}=e;o&&o.parentNode&&o.parentNode.removeChild(o)}else e.referenceCount=o,n.set(t,e)}}class w extends x{static get tagName(){return"axa-button-link"}static get styles(){return o` | ||
| ${r(':host {\n display: inline-block;\n vertical-align: bottom;\n}\n\n.a-button-link {\n font-size: 14px;\n letter-spacing: 0.02em;\n line-height: 17px;\n font-family: "Source Sans Pro", Arial, sans-serif;\n position: relative;\n display: inline-block;\n box-sizing: border-box;\n padding: 0 30px;\n margin: 0;\n width: 100%;\n vertical-align: bottom;\n -webkit-hyphens: auto;\n -ms-hyphens: auto;\n hyphens: auto;\n overflow-wrap: break-word;\n word-wrap: break-word;\n text-decoration: none;\n text-transform: uppercase;\n color: #fff;\n background-color: #00008f;\n border: solid 2px #00008f;\n border-bottom-color: #00005b;\n}\n.a-button-link:hover, .a-button-link:active, .a-button-link:focus {\n cursor: pointer;\n text-decoration: none;\n background-color: #00005b;\n border-color: #00005b;\n outline: 0;\n}\n.a-button-link[aria-disabled=true] {\n color: #999;\n background-color: #e5e5e5;\n border-color: #e5e5e5;\n border-bottom-color: #ccc;\n pointer-events: none;\n}\n.a-button-link__flex-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n min-height: 36px;\n height: 25px;\n box-sizing: border-box;\n}\n.a-button-link__icon {\n display: flex;\n margin-right: 10px;\n}\n.a-button-link__arrow {\n display: flex;\n margin-left: 10px;\n}\n\n.a-button-link--large {\n font-size: 16px;\n letter-spacing: 0.02em;\n line-height: 24px;\n font-family: "Source Sans Pro", Arial, sans-serif;\n}\n\n.a-button-link--large .a-button-link__flex-wrapper {\n min-height: 46px;\n}\n\n.a-button-link--small .a-button-link__flex-wrapper {\n min-height: 26px;\n}\n\n.a-button-link--motion {\n z-index: 0;\n overflow: hidden;\n transition: color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;\n}\n.a-button-link--motion::after {\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n display: block;\n width: 0.001px;\n height: 100vw;\n content: "";\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n transition: width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;\n background-color: #00005b;\n}\n.a-button-link--motion:hover, .a-button-link--motion:focus {\n background-color: #00008f;\n color: #fff;\n}\n.a-button-link--motion:hover::after, .a-button-link--motion:focus::after {\n width: 110%;\n background-color: #00005b;\n}\n\n.a-button-link--red {\n background-color: #f07662;\n border-color: #f07662;\n border-bottom-color: #ec4d33;\n}\n.a-button-link--red:hover, .a-button-link--red:active, .a-button-link--red:focus {\n background-color: #ec4d33;\n border-color: #ec4d33;\n}\n.a-button-link--red.a-button-link--motion::after {\n background-color: #ec4d33;\n}\n.a-button-link--red.a-button-link--motion:hover, .a-button-link--red.a-button-link--motion:focus {\n background-color: #f07662;\n color: #fff;\n}\n.a-button-link--red.a-button-link--motion:hover::after, .a-button-link--red.a-button-link--motion:focus::after {\n background-color: #ec4d33;\n}\n\n.a-button-link--secondary {\n background-color: transparent;\n border-bottom-color: #00008f;\n color: #00008f;\n}\n.a-button-link--secondary:hover, .a-button-link--secondary:active, .a-button-link--secondary:focus {\n color: #fff;\n}\n.a-button-link--secondary.a-button-link--motion {\n background-color: transparent;\n}\n\n.a-button-link--inverted {\n background-color: transparent;\n border-color: #fff;\n color: #fff;\n}\n.a-button-link--inverted:hover, .a-button-link--inverted:active, .a-button-link--inverted:focus {\n color: #00005b;\n background-color: #fff;\n border-color: #fff;\n}\n.a-button-link--inverted.a-button-link--motion {\n background-color: transparent;\n}\n.a-button-link--inverted.a-button-link--motion::after {\n background-color: #fff;\n}\n\n.a-button-link--inverted-blue-ocean:hover, .a-button-link--inverted-blue-ocean:active, .a-button-link--inverted-blue-ocean:focus {\n color: #4976ba;\n}\n\n.a-button-link--inverted-red-tosca:hover, .a-button-link--inverted-red-tosca:active, .a-button-link--inverted-red-tosca:focus {\n color: #914146;\n}\n\n.a-button-link--inverted-purple-logan:hover, .a-button-link--inverted-purple-logan:active, .a-button-link--inverted-purple-logan:focus {\n color: #9190ac;\n}\n\n.a-button-link--inverted-green-viridian:hover, .a-button-link--inverted-green-viridian:active, .a-button-link--inverted-green-viridian:focus {\n color: #668980;\n}\n\n.a-button-link--inverted-blue-teal:hover, .a-button-link--inverted-blue-teal:active, .a-button-link--inverted-blue-teal:focus {\n color: #027180;\n}')} | ||
| `}static get blockMouseEventsCss(){return"axa-button-link {\n position: relative;\n}\naxa-button-link[disabled] {\n pointer-events: none;\n}"}static get properties(){return{href:{type:String},external:{type:Boolean},variant:{type:String},icon:{type:String},size:{type:String},motionOff:{type:Boolean},disabled:{type:Boolean,reflect:!0},onClick:{type:Function,attribute:!1}}}constructor(){super(),v(this),d([i],{"axa-button-link":{"axa-button-link":"7.0.0","axa-icon":"8.0.0"}},this)}get showIcon(){return this.icon&&"arrow-right"!==this.icon}get showArrow(){return"arrow-right"===this.icon}render(){const{href:n,external:e,size:o="",motionOff:r,disabled:i,variant:l="",icon:s=""}=this,c={"a-button-link":!0,"a-button-link--large":"large"===o,"a-button-link--small":"small"===o,"a-button-link--motion":!r&&!i,"a-button-link--secondary":"secondary"===l,"a-button-link--red":"red"===l,"a-button-link--inverted":l.includes("inverted"),"a-button-link--inverted-blue-ocean":"inverted-blue-ocean"===l,"a-button-link--inverted-red-tosca":"inverted-red-tosca"===l,"a-button-link--inverted-purple-logan":"inverted-purple-logan"===l,"a-button-link--inverted-green-viridian":"inverted-green-viridian"===l,"a-button-link--inverted-blue-teal":"inverted-blue-teal"===l};return t` | ||
| <a | ||
| class="${a(c)}" | ||
| href="${n}" | ||
| target="${e?"_blank":"_top"}" | ||
| rel="${e?"noreferrer noopener":""}" | ||
| aria-disabled="${i}" | ||
| @click="${this.onClick}" | ||
| > | ||
| <span class="a-button-link__flex-wrapper"> | ||
| ${this.showIcon?k(this)` | ||
| <axa-icon class="a-button-link__icon" icon="${s}"></axa-icon> | ||
| `:""} | ||
| <slot></slot> | ||
| ${this.showArrow?k(this)` | ||
| <axa-icon | ||
| class="a-button-link__arrow js-button-link__arrow" | ||
| icon="arrow-right" | ||
| ></axa-icon> | ||
| `:""} | ||
| </span> | ||
| </a> | ||
| `}firstUpdated(){this.inlineStyles("blockMouseEventsCss")}}d([w],{"axa-button-link":{"axa-button-link":"7.0.0","axa-icon":"8.0.0"}});var y=(t,e)=>((t,e,o)=>{const{tagName:r}=e,a=o?d([e],o):r,i=a.split("-").map((n=>n.charAt(0).toUpperCase()+n.slice(1))).join(""),l=({children:o,...r})=>{const{attrs:i,props:l}=p(r,e);return n(t)(a,{isReact:!0,attrs:i,...l},o)};return l.displayName=i,l})(t,w,e);export{y as default}; |
| { | ||
| "name": "@axa-ch/button-link", | ||
| "version": "6.0.2", | ||
| "version": "7.0.0", | ||
| "description": "The button-link component for the AXA Pattern Library", | ||
@@ -33,8 +33,8 @@ "author": "Pattern Warriors", | ||
| "dependencies": { | ||
| "@axa-ch/icon": "7.0.2", | ||
| "@axa-ch/icon": "8.0.0", | ||
| "@skatejs/val": "^0.4.0", | ||
| "lit": "^2.2.1" | ||
| }, | ||
| "gitHead": "5228a2c4a9eb0740275d41af4eb47b0916804ddf", | ||
| "gitHead": "74ca73796f6288bb033e34457de016d201f1346a", | ||
| "main": "lib/index.js" | ||
| } |
Sorry, the diff of this file is too big to display
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-48.25%
63202
- Lines of code
- decreased by-71.87%
346
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Added@axa-ch/icon@8.0.0(transitive)
+ Added@axa-ch/materials@16.0.0(transitive)
- Removed@axa-ch/icon@7.0.2(transitive)
- Removed@axa-ch/materials@15.0.2(transitive)
Updated@axa-ch/icon@8.0.0