New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@axa-ch/button
Advanced tools
@axa-ch/button - npm Package Compare versions
Comparing version 7.0.2 to 8.0.0
627
lib/index.js
@@ -1,607 +0,20 @@ | ||
| 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 _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 _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 buttonCSS = ":host {\n display: inline-block;\n vertical-align: bottom;\n}\n\n.a-button {\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 box-sizing: border-box;\n padding: 0 30px;\n margin: 0;\n min-height: 40px;\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-transform: uppercase;\n color: #fff;\n background-color: #00008f;\n border: solid 2px #00008f;\n border-bottom-color: #00005b;\n}\n.a-button:hover, .a-button:active, .a-button:focus {\n cursor: pointer;\n text-decoration: none;\n background-color: #00005b;\n border-color: #00005b;\n outline: 0;\n}\n.a-button:disabled {\n color: #999;\n background-color: #e5e5e5;\n border-color: #e5e5e5;\n border-bottom-color: #ccc;\n pointer-events: none;\n}\n.a-button__flex-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.a-button__icon {\n display: flex;\n margin-right: 10px;\n}\n.a-button__arrow {\n display: flex;\n margin-left: 10px;\n}\n\n.a-button--large {\n min-height: 50px;\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--small {\n min-height: 30px;\n font-size: 14px;\n letter-spacing: 0.02em;\n line-height: 17px;\n font-family: \"Source Sans Pro\", Arial, sans-serif;\n}\n\n.a-button--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--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--motion:hover, .a-button--motion:focus {\n background-color: #00008f;\n color: #fff;\n}\n.a-button--motion:hover::after, .a-button--motion:focus::after {\n width: 110%;\n background-color: #00005b;\n}\n\n.a-button--red {\n background-color: #f07662;\n border-color: #f07662;\n border-bottom-color: #ec4d33;\n}\n.a-button--red:hover, .a-button--red:active, .a-button--red:focus {\n background-color: #ec4d33;\n border-color: #ec4d33;\n}\n.a-button--red.a-button--motion::after {\n background-color: #ec4d33;\n}\n.a-button--red.a-button--motion:hover, .a-button--red.a-button--motion:focus {\n background-color: #f07662;\n color: #fff;\n}\n.a-button--red.a-button--motion:hover::after, .a-button--red.a-button--motion:focus::after {\n background-color: #ec4d33;\n}\n\n.a-button--secondary {\n background-color: transparent;\n border-bottom-color: #00008f;\n color: #00008f;\n}\n.a-button--secondary:hover, .a-button--secondary:active, .a-button--secondary:focus {\n color: #fff;\n}\n.a-button--secondary.a-button--motion {\n background-color: transparent;\n}\n\n.a-button--inverted {\n background-color: transparent;\n border-color: #fff;\n color: #fff;\n}\n.a-button--inverted:hover, .a-button--inverted:active, .a-button--inverted:focus {\n background-color: #fff;\n border-color: #fff;\n color: #00005b;\n}\n.a-button--inverted.a-button--motion {\n background-color: transparent;\n}\n.a-button--inverted.a-button--motion::after {\n background-color: #fff;\n}\n\n.a-button--inverted-blue-ocean:hover, .a-button--inverted-blue-ocean:active, .a-button--inverted-blue-ocean:focus {\n color: #4976ba;\n}\n\n.a-button--inverted-red-tosca:hover, .a-button--inverted-red-tosca:active, .a-button--inverted-red-tosca:focus {\n color: #914146;\n}\n\n.a-button--inverted-purple-logan:hover, .a-button--inverted-purple-logan:active, .a-button--inverted-purple-logan:focus {\n color: #9190ac;\n}\n\n.a-button--inverted-green-viridian:hover, .a-button--inverted-green-viridian:active, .a-button--inverted-green-viridian:focus {\n color: #668980;\n}\n\n.a-button--inverted-blue-teal:hover, .a-button--inverted-blue-teal:active, .a-button--inverted-blue-teal:focus {\n color: #027180;\n}"; | ||
| var childStyles = "axa-button {\n position: relative;\n}\naxa-button[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'; | ||
| /* eslint-disable no-undef */ | ||
| var isNativeShadowDOM = (window || global).ShadowRoot ? ShadowRoot.toString().indexOf('native code') > -1 : false; | ||
| /* eslint-enable no-undef */ | ||
| // @TODO: REMOVE ONCE IE11 is deprecated!!!! | ||
| // equivalent to event.isTrusted. Unfortunately, IE11 does not support it | ||
| var eventIsTrusted = e => e.screenX || e.screenY || e.clientX || e.clientY; | ||
| class AXAButton extends InlineStyles { | ||
| static get tagName() { | ||
| return 'axa-button'; | ||
| } | ||
| static get styles() { | ||
| return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n "])), unsafeCSS(buttonCSS)); | ||
| } // 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 { | ||
| // button, submit, reset | ||
| type: { | ||
| type: String, | ||
| reflect: true, | ||
| defaultValue: 'button' | ||
| }, | ||
| // 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() { | ||
| var _this; | ||
| super(); | ||
| _this = this; | ||
| _defineProperty(this, "handleClick", function (e) { | ||
| var eventIsManuallyFunctionTriggered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| // block propagation if event is not synthetic. We need only that | ||
| // the event coming from fake button is fired so that default | ||
| // form behaviour works (submit, reset, etc). The reason why it works with fake button is | ||
| // that fake button is NOT inside a ShadowDOM. The event instead | ||
| // bubbles out of ShadowDOM, hence the stop propagation trick | ||
| // TODO: remove all the IE stuff if support drops | ||
| var isIESubmitResetEvent = document.documentMode && eventIsTrusted(e) && isNativeShadowDOM && _this.isTypeSubmitOrReset; | ||
| var isSubmitResetEvent = e.isTrusted && isNativeShadowDOM && _this.isTypeSubmitOrReset; | ||
| if (isIESubmitResetEvent || isSubmitResetEvent) { | ||
| e.stopPropagation(); | ||
| _this.fakeButton.click(); | ||
| } // If we are under react, onClick will be camel Case onClick. If so, use it | ||
| // otherwise if a consumer defined a onclick="fn", call that instead | ||
| var onclick = _this.onClick || _this.originalOnclick; // if click event is fired manually via javascript, the this.onclick = e => { function | ||
| // will be called and therefore make sure to not trigger it again. | ||
| if (!eventIsManuallyFunctionTriggered && typeof onclick === 'function') { | ||
| onclick(e); | ||
| } | ||
| }); | ||
| applyDefaults(this); | ||
| /* eslint-disable no-undef */ | ||
| defineVersioned([AXAIcon], { | ||
| "axa-button": { | ||
| "axa-button": "7.0.2", | ||
| "axa-icon": "7.0.2" | ||
| } | ||
| }, this); | ||
| /* eslint-enable no-undef */ | ||
| } | ||
| get isTypeSubmitOrReset() { | ||
| return this.type === 'submit' || this.type === 'reset'; | ||
| } | ||
| get showIcon() { | ||
| return this.icon && this.icon !== ARROW_RIGHT; | ||
| } | ||
| get showArrow() { | ||
| return this.icon === ARROW_RIGHT; | ||
| } | ||
| watch(mode) { | ||
| switch (mode) { | ||
| case 'stop': | ||
| if (this._observer) { | ||
| this._observer.disconnect(); | ||
| } | ||
| break; | ||
| case 'start': | ||
| if (!this._observer) { | ||
| this._observer = new MutationObserver(() => this.attachFakeButton()); | ||
| } | ||
| this._observer.observe(this, { | ||
| childList: true | ||
| }); | ||
| break; | ||
| } | ||
| } | ||
| attachFakeButton() { | ||
| var fakeButton = document.createElement('button'); | ||
| fakeButton.type = this.type; | ||
| fakeButton.style.display = 'none'; | ||
| this.watch('stop'); | ||
| this.appendChild(fakeButton); | ||
| this.watch('start'); | ||
| this.fakeButton = fakeButton; | ||
| } | ||
| firstUpdated() { | ||
| this.inlineStyles('blockMouseEventsCss'); | ||
| var { | ||
| style | ||
| } = this; // shadow dom submit btn workaround | ||
| // only use fakeButton when shadowDom is natively supported | ||
| if (isNativeShadowDOM && this.isTypeSubmitOrReset) { | ||
| this.attachFakeButton(); | ||
| } | ||
| style.appearance = 'none'; | ||
| style.mozAppearance = 'none'; | ||
| style.webkitAppearance = 'none'; | ||
| style.msAppearance = 'none'; | ||
| style.oAppearance = 'none'; | ||
| if (typeof this.onclick === 'function') { | ||
| // cache original event so that we can fire it when internal button is pressed | ||
| // We are going to override original event so that someone can manually trigger | ||
| // onclick via function call | ||
| this.originalOnclick = this.onclick; | ||
| } // If someone fires a click on the button and its type is submit then trigger fake button | ||
| // press | ||
| this.onclick = e => { | ||
| // call handle click and pass flag to be sure that handle click does not call | ||
| // us back. | ||
| this.handleClick(e, true); | ||
| }; | ||
| } | ||
| render() { | ||
| var { | ||
| type, | ||
| motionOff, | ||
| disabled, | ||
| variant = '', | ||
| icon = '', | ||
| size = '' | ||
| } = this; | ||
| var classes = { | ||
| 'a-button': true, | ||
| 'a-button--large': size === 'large', | ||
| 'a-button--small': size === 'small', | ||
| 'a-button--motion': !motionOff, | ||
| 'a-button--secondary': variant === 'secondary', | ||
| 'a-button--red': variant === 'red', | ||
| 'a-button--inverted': variant.includes('inverted'), | ||
| 'a-button--inverted-blue-ocean': variant === 'inverted-blue-ocean', | ||
| 'a-button--inverted-red-tosca': variant === 'inverted-red-tosca', | ||
| 'a-button--inverted-purple-logan': variant === 'inverted-purple-logan', | ||
| 'a-button--inverted-green-viridian': variant === 'inverted-green-viridian', | ||
| 'a-button--inverted-blue-teal': variant === 'inverted-blue-teal' | ||
| }; | ||
| return html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n <button\n type=\"", "\"\n class=\"", "\"\n ?disabled=\"", "\"\n @click=\"", "\"\n >\n <span class=\"a-button__flex-wrapper\">\n ", "\n <slot></slot>\n ", "\n </span>\n </button>\n "])), type, classMap(classes), disabled, this.handleClick, this.showIcon ? versionedHtml(this)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n <axa-icon class=\"a-button__icon\" icon=\"", "\"></axa-icon>\n "])), icon) : '', this.showArrow ? versionedHtml(this)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n <axa-icon class=\"a-button__arrow js-button__arrow\" icon=\"arrow-right\"></axa-icon>\n "]))) : ''); | ||
| } | ||
| disconnectedCallback() { | ||
| super.disconnectedCallback(); // remove installed observer, if any | ||
| this.watch('stop'); | ||
| } | ||
| } | ||
| /* eslint-disable no-undef */ | ||
| defineVersioned([AXAButton], { | ||
| "axa-button": { | ||
| "axa-button": "7.0.2", | ||
| "axa-icon": "7.0.2" | ||
| } | ||
| }); | ||
| export { AXAButton as default }; | ||
| import{html as t,LitElement as n,css as e,unsafeCSS as o}from"lit";import{classMap as r}from"lit/directives/class-map.js";import a from"@axa-ch/icon";const i=t=>!(null==t),s=new Map;[[String,""],[Boolean,!1],[Object,{}],[Array,[]],[Number,0],[Function,()=>{}]].forEach((([t,n])=>{s.set(t,n)}));const c=()=>{},l=t=>{const{constructor:{properties:n}}=t;Object.keys(n).forEach((e=>{const o=n[e],{type:r,converter:a,defaultValue:l}=o;if(!r){if(!a)throw new Error(`<${t.nodeName}> property "${e}" is missing a type!`);return}let u=t[e];i(u)||(u=r===Boolean?t.hasAttribute(e):t.getAttribute(e),i(u)?t[e]=((t,n)=>n===Number?parseFloat(t):n===Function?c:n===Array||n===Object?JSON.parse(t):t)(u,r):void 0===l&&"defaultValue"in o||(t[e]="defaultValue"in o?l:s.get(r)))}))};var u=(t,n)=>{const e=t.toLowerCase();return window.customElements.get(e)||window.customElements.define(e,n),e};const d=(t,n)=>{return`${t}-${e=n,`${e}`.replace(/\./g,"-").replace(/[^A-Za-z0-9-]/g,"")}`;var e},b=(t,n="",e="<")=>`${e}${n}${t}`,h=(t,n,e)=>b(d(t,n),e,"{"),p=(t,n,e)=>t.map((t=>t.split(b(n)).join(h(n,e)).split(b(n,"/")).join(h(n,e,"/")))),f=(t,n,e)=>{const o="string"==typeof n&&n;let r="";return t.forEach((t=>{const a=t instanceof HTMLElement?t.constructor:t,{tagName:i}=a,s=!o&&n[i];if(s){if(!window.customElements.get(i)&&a.versions)throw Error(`'versions' is a reserved class property, but was found in ${i}'s class`);a.versions=s,u(i,a)}let{versions:c}=a;!c&&e&&(c=n[e.constructor.tagName],c[i]=Object.values(c)[0]);const l=o||c[i];r=d(i,l),u(r,class extends a{})})),r},g=n=>(e,...o)=>{const r=n.constructor,[a,i]=(t=>{const{versions:n,tagName:e}=t,o=Object.keys(n).filter((t=>t!==e)).sort(((t,n)=>n.length-t.length));return[o,o.map((t=>n[t]))]})(r);let s=e;for(let t=0,n=a.length;t<n;t++)s=p(s,a[t],i[t]);for(let t=0,n=s.length;t<n;t++)s[t]=s[t].split("{").join("<");return s.raw=s,t(s,...o)};const v={};class m extends n{inlineStyles(t="styles"){const n=this.getRootNode(),e=v[this.tagName]||new WeakMap,o=e.get(n)||{},r=(o.referenceCount||0)+1;if(o.referenceCount=r,e.set(n,r),v[this.tagName]=e,1===r){this.ownerDocument!==n&&(this._rootNode=n);const e=document.createElement("style");let r=this.constructor[t];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();(n instanceof ShadowRoot?n:document.head).appendChild(e),o.style=e}e.set(n,o),v[this.tagName]=e}disconnectedCallback(){super.disconnectedCallback();const t=v[this.tagName];if(!t)return;const n=this._rootNode||this.ownerDocument,e=t.get(n)||{},o=(e.referenceCount||0)-1;if(o<1){t.delete(n);const{style:o}=e;o&&o.parentNode&&o.parentNode.removeChild(o)}else e.referenceCount=o,t.set(n,e)}}const y=!!(window||global).ShadowRoot&&ShadowRoot.toString().indexOf("native code")>-1;class w extends m{static get tagName(){return"axa-button"}static get styles(){return e` | ||
| ${o(':host {\n display: inline-block;\n vertical-align: bottom;\n}\n\n.a-button {\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 box-sizing: border-box;\n padding: 0 30px;\n margin: 0;\n min-height: 40px;\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-transform: uppercase;\n color: #fff;\n background-color: #00008f;\n border: solid 2px #00008f;\n border-bottom-color: #00005b;\n}\n.a-button:hover, .a-button:active, .a-button:focus {\n cursor: pointer;\n text-decoration: none;\n background-color: #00005b;\n border-color: #00005b;\n outline: 0;\n}\n.a-button:disabled {\n color: #999;\n background-color: #e5e5e5;\n border-color: #e5e5e5;\n border-bottom-color: #ccc;\n pointer-events: none;\n}\n.a-button__flex-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.a-button__icon {\n display: flex;\n margin-right: 10px;\n}\n.a-button__arrow {\n display: flex;\n margin-left: 10px;\n}\n\n.a-button--large {\n min-height: 50px;\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--small {\n min-height: 30px;\n font-size: 14px;\n letter-spacing: 0.02em;\n line-height: 17px;\n font-family: "Source Sans Pro", Arial, sans-serif;\n}\n\n.a-button--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--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--motion:hover, .a-button--motion:focus {\n background-color: #00008f;\n color: #fff;\n}\n.a-button--motion:hover::after, .a-button--motion:focus::after {\n width: 110%;\n background-color: #00005b;\n}\n\n.a-button--red {\n background-color: #f07662;\n border-color: #f07662;\n border-bottom-color: #ec4d33;\n}\n.a-button--red:hover, .a-button--red:active, .a-button--red:focus {\n background-color: #ec4d33;\n border-color: #ec4d33;\n}\n.a-button--red.a-button--motion::after {\n background-color: #ec4d33;\n}\n.a-button--red.a-button--motion:hover, .a-button--red.a-button--motion:focus {\n background-color: #f07662;\n color: #fff;\n}\n.a-button--red.a-button--motion:hover::after, .a-button--red.a-button--motion:focus::after {\n background-color: #ec4d33;\n}\n\n.a-button--secondary {\n background-color: transparent;\n border-bottom-color: #00008f;\n color: #00008f;\n}\n.a-button--secondary:hover, .a-button--secondary:active, .a-button--secondary:focus {\n color: #fff;\n}\n.a-button--secondary.a-button--motion {\n background-color: transparent;\n}\n\n.a-button--inverted {\n background-color: transparent;\n border-color: #fff;\n color: #fff;\n}\n.a-button--inverted:hover, .a-button--inverted:active, .a-button--inverted:focus {\n background-color: #fff;\n border-color: #fff;\n color: #00005b;\n}\n.a-button--inverted.a-button--motion {\n background-color: transparent;\n}\n.a-button--inverted.a-button--motion::after {\n background-color: #fff;\n}\n\n.a-button--inverted-blue-ocean:hover, .a-button--inverted-blue-ocean:active, .a-button--inverted-blue-ocean:focus {\n color: #4976ba;\n}\n\n.a-button--inverted-red-tosca:hover, .a-button--inverted-red-tosca:active, .a-button--inverted-red-tosca:focus {\n color: #914146;\n}\n\n.a-button--inverted-purple-logan:hover, .a-button--inverted-purple-logan:active, .a-button--inverted-purple-logan:focus {\n color: #9190ac;\n}\n\n.a-button--inverted-green-viridian:hover, .a-button--inverted-green-viridian:active, .a-button--inverted-green-viridian:focus {\n color: #668980;\n}\n\n.a-button--inverted-blue-teal:hover, .a-button--inverted-blue-teal:active, .a-button--inverted-blue-teal:focus {\n color: #027180;\n}')} | ||
| `}static get blockMouseEventsCss(){return"axa-button {\n position: relative;\n}\naxa-button[disabled] {\n pointer-events: none;\n}"}static get properties(){return{type:{type:String,reflect:!0,defaultValue:"button"},variant:{type:String},icon:{type:String},size:{type:String},motionOff:{type:Boolean},disabled:{type:Boolean,reflect:!0},onClick:{type:Function,attribute:!1}}}constructor(){super(),l(this),f([a],{"axa-button":{"axa-button":"8.0.0","axa-icon":"8.0.0"}},this),this.handleClick=this.handleClick.bind(this)}get isTypeSubmitOrReset(){return"submit"===this.type||"reset"===this.type}get showIcon(){return this.icon&&"arrow-right"!==this.icon}get showArrow(){return"arrow-right"===this.icon}watch(t){switch(t){case"stop":this._observer&&this._observer.disconnect();break;case"start":this._observer||(this._observer=new MutationObserver((()=>this.attachFakeButton()))),this._observer.observe(this,{childList:!0})}}attachFakeButton(){const t=document.createElement("button");t.type=this.type,t.style.display="none",this.watch("stop"),this.appendChild(t),this.watch("start"),this.fakeButton=t}firstUpdated(){this.inlineStyles("blockMouseEventsCss");const{style:t}=this;y&&this.isTypeSubmitOrReset&&this.attachFakeButton(),t.appearance="none",t.mozAppearance="none",t.webkitAppearance="none",t.msAppearance="none",t.oAppearance="none","function"==typeof this.onclick&&(this.originalOnclick=this.onclick),this.onclick=t=>{this.handleClick(t,!0)}}handleClick(t,n=!1){const e=document.documentMode&&(t=>t.screenX||t.screenY||t.clientX||t.clientY)(t)&&y&&this.isTypeSubmitOrReset,o=t.isTrusted&&y&&this.isTypeSubmitOrReset;(e||o)&&(t.stopPropagation(),this.fakeButton.click());const r=this.onClick||this.originalOnclick;n||"function"!=typeof r||r(t)}render(){const{type:n,motionOff:e,disabled:o,variant:a="",icon:i="",size:s=""}=this,c={"a-button":!0,"a-button--large":"large"===s,"a-button--small":"small"===s,"a-button--motion":!e,"a-button--secondary":"secondary"===a,"a-button--red":"red"===a,"a-button--inverted":a.includes("inverted"),"a-button--inverted-blue-ocean":"inverted-blue-ocean"===a,"a-button--inverted-red-tosca":"inverted-red-tosca"===a,"a-button--inverted-purple-logan":"inverted-purple-logan"===a,"a-button--inverted-green-viridian":"inverted-green-viridian"===a,"a-button--inverted-blue-teal":"inverted-blue-teal"===a};return t` | ||
| <button | ||
| type="${n}" | ||
| class="${r(c)}" | ||
| ?disabled="${o}" | ||
| @click="${this.handleClick}" | ||
| > | ||
| <span class="a-button__flex-wrapper"> | ||
| ${this.showIcon?g(this)` | ||
| <axa-icon class="a-button__icon" icon="${i}"></axa-icon> | ||
| `:""} | ||
| <slot></slot> | ||
| ${this.showArrow?g(this)` | ||
| <axa-icon class="a-button__arrow js-button__arrow" icon="arrow-right"></axa-icon> | ||
| `:""} | ||
| </span> | ||
| </button> | ||
| `}disconnectedCallback(){super.disconnectedCallback(),this.watch("stop")}}f([w],{"axa-button":{"axa-button":"8.0.0","axa-icon":"8.0.0"}});export{w as default}; |
@@ -16,3 +16,4 @@ import React from 'react'; | ||
| export interface AXAButtonProps { | ||
| export interface AXAButtonProps | ||
| extends React.ButtonHTMLAttributes<HTMLButtonElement> { | ||
| type?: ButtonType; | ||
@@ -24,5 +25,6 @@ variant?: Variant; | ||
| disabled?: boolean; | ||
| onClick?: (event: React.MouseEvent<HTMLElement>) => void; | ||
| onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void; | ||
| className?: string; | ||
| slot?: string; | ||
| children?: React.ReactNode; | ||
| } | ||
@@ -29,0 +31,0 @@ |
@@ -1,766 +0,20 @@ | ||
| 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 buttonCSS = ":host {\n display: inline-block;\n vertical-align: bottom;\n}\n\n.a-button {\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 box-sizing: border-box;\n padding: 0 30px;\n margin: 0;\n min-height: 40px;\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-transform: uppercase;\n color: #fff;\n background-color: #00008f;\n border: solid 2px #00008f;\n border-bottom-color: #00005b;\n}\n.a-button:hover, .a-button:active, .a-button:focus {\n cursor: pointer;\n text-decoration: none;\n background-color: #00005b;\n border-color: #00005b;\n outline: 0;\n}\n.a-button:disabled {\n color: #999;\n background-color: #e5e5e5;\n border-color: #e5e5e5;\n border-bottom-color: #ccc;\n pointer-events: none;\n}\n.a-button__flex-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.a-button__icon {\n display: flex;\n margin-right: 10px;\n}\n.a-button__arrow {\n display: flex;\n margin-left: 10px;\n}\n\n.a-button--large {\n min-height: 50px;\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--small {\n min-height: 30px;\n font-size: 14px;\n letter-spacing: 0.02em;\n line-height: 17px;\n font-family: \"Source Sans Pro\", Arial, sans-serif;\n}\n\n.a-button--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--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--motion:hover, .a-button--motion:focus {\n background-color: #00008f;\n color: #fff;\n}\n.a-button--motion:hover::after, .a-button--motion:focus::after {\n width: 110%;\n background-color: #00005b;\n}\n\n.a-button--red {\n background-color: #f07662;\n border-color: #f07662;\n border-bottom-color: #ec4d33;\n}\n.a-button--red:hover, .a-button--red:active, .a-button--red:focus {\n background-color: #ec4d33;\n border-color: #ec4d33;\n}\n.a-button--red.a-button--motion::after {\n background-color: #ec4d33;\n}\n.a-button--red.a-button--motion:hover, .a-button--red.a-button--motion:focus {\n background-color: #f07662;\n color: #fff;\n}\n.a-button--red.a-button--motion:hover::after, .a-button--red.a-button--motion:focus::after {\n background-color: #ec4d33;\n}\n\n.a-button--secondary {\n background-color: transparent;\n border-bottom-color: #00008f;\n color: #00008f;\n}\n.a-button--secondary:hover, .a-button--secondary:active, .a-button--secondary:focus {\n color: #fff;\n}\n.a-button--secondary.a-button--motion {\n background-color: transparent;\n}\n\n.a-button--inverted {\n background-color: transparent;\n border-color: #fff;\n color: #fff;\n}\n.a-button--inverted:hover, .a-button--inverted:active, .a-button--inverted:focus {\n background-color: #fff;\n border-color: #fff;\n color: #00005b;\n}\n.a-button--inverted.a-button--motion {\n background-color: transparent;\n}\n.a-button--inverted.a-button--motion::after {\n background-color: #fff;\n}\n\n.a-button--inverted-blue-ocean:hover, .a-button--inverted-blue-ocean:active, .a-button--inverted-blue-ocean:focus {\n color: #4976ba;\n}\n\n.a-button--inverted-red-tosca:hover, .a-button--inverted-red-tosca:active, .a-button--inverted-red-tosca:focus {\n color: #914146;\n}\n\n.a-button--inverted-purple-logan:hover, .a-button--inverted-purple-logan:active, .a-button--inverted-purple-logan:focus {\n color: #9190ac;\n}\n\n.a-button--inverted-green-viridian:hover, .a-button--inverted-green-viridian:active, .a-button--inverted-green-viridian:focus {\n color: #668980;\n}\n\n.a-button--inverted-blue-teal:hover, .a-button--inverted-blue-teal:active, .a-button--inverted-blue-teal:focus {\n color: #027180;\n}"; | ||
| var childStyles = "axa-button {\n position: relative;\n}\naxa-button[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'; | ||
| /* eslint-disable no-undef */ | ||
| var isNativeShadowDOM = (window || global).ShadowRoot ? ShadowRoot.toString().indexOf('native code') > -1 : false; | ||
| /* eslint-enable no-undef */ | ||
| // @TODO: REMOVE ONCE IE11 is deprecated!!!! | ||
| // equivalent to event.isTrusted. Unfortunately, IE11 does not support it | ||
| var eventIsTrusted = e => e.screenX || e.screenY || e.clientX || e.clientY; | ||
| class AXAButton extends InlineStyles { | ||
| static get tagName() { | ||
| return 'axa-button'; | ||
| } | ||
| static get styles() { | ||
| return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n "])), unsafeCSS(buttonCSS)); | ||
| } // 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 { | ||
| // button, submit, reset | ||
| type: { | ||
| type: String, | ||
| reflect: true, | ||
| defaultValue: 'button' | ||
| }, | ||
| // 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() { | ||
| var _this; | ||
| super(); | ||
| _this = this; | ||
| _defineProperty(this, "handleClick", function (e) { | ||
| var eventIsManuallyFunctionTriggered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| // block propagation if event is not synthetic. We need only that | ||
| // the event coming from fake button is fired so that default | ||
| // form behaviour works (submit, reset, etc). The reason why it works with fake button is | ||
| // that fake button is NOT inside a ShadowDOM. The event instead | ||
| // bubbles out of ShadowDOM, hence the stop propagation trick | ||
| // TODO: remove all the IE stuff if support drops | ||
| var isIESubmitResetEvent = document.documentMode && eventIsTrusted(e) && isNativeShadowDOM && _this.isTypeSubmitOrReset; | ||
| var isSubmitResetEvent = e.isTrusted && isNativeShadowDOM && _this.isTypeSubmitOrReset; | ||
| if (isIESubmitResetEvent || isSubmitResetEvent) { | ||
| e.stopPropagation(); | ||
| _this.fakeButton.click(); | ||
| } // If we are under react, onClick will be camel Case onClick. If so, use it | ||
| // otherwise if a consumer defined a onclick="fn", call that instead | ||
| var onclick = _this.onClick || _this.originalOnclick; // if click event is fired manually via javascript, the this.onclick = e => { function | ||
| // will be called and therefore make sure to not trigger it again. | ||
| if (!eventIsManuallyFunctionTriggered && typeof onclick === 'function') { | ||
| onclick(e); | ||
| } | ||
| }); | ||
| applyDefaults(this); | ||
| /* eslint-disable no-undef */ | ||
| defineVersioned([AXAIcon], { | ||
| "axa-button": { | ||
| "axa-button": "7.0.2", | ||
| "axa-icon": "7.0.2" | ||
| } | ||
| }, this); | ||
| /* eslint-enable no-undef */ | ||
| } | ||
| get isTypeSubmitOrReset() { | ||
| return this.type === 'submit' || this.type === 'reset'; | ||
| } | ||
| get showIcon() { | ||
| return this.icon && this.icon !== ARROW_RIGHT; | ||
| } | ||
| get showArrow() { | ||
| return this.icon === ARROW_RIGHT; | ||
| } | ||
| watch(mode) { | ||
| switch (mode) { | ||
| case 'stop': | ||
| if (this._observer) { | ||
| this._observer.disconnect(); | ||
| } | ||
| break; | ||
| case 'start': | ||
| if (!this._observer) { | ||
| this._observer = new MutationObserver(() => this.attachFakeButton()); | ||
| } | ||
| this._observer.observe(this, { | ||
| childList: true | ||
| }); | ||
| break; | ||
| } | ||
| } | ||
| attachFakeButton() { | ||
| var fakeButton = document.createElement('button'); | ||
| fakeButton.type = this.type; | ||
| fakeButton.style.display = 'none'; | ||
| this.watch('stop'); | ||
| this.appendChild(fakeButton); | ||
| this.watch('start'); | ||
| this.fakeButton = fakeButton; | ||
| } | ||
| firstUpdated() { | ||
| this.inlineStyles('blockMouseEventsCss'); | ||
| var { | ||
| style | ||
| } = this; // shadow dom submit btn workaround | ||
| // only use fakeButton when shadowDom is natively supported | ||
| if (isNativeShadowDOM && this.isTypeSubmitOrReset) { | ||
| this.attachFakeButton(); | ||
| } | ||
| style.appearance = 'none'; | ||
| style.mozAppearance = 'none'; | ||
| style.webkitAppearance = 'none'; | ||
| style.msAppearance = 'none'; | ||
| style.oAppearance = 'none'; | ||
| if (typeof this.onclick === 'function') { | ||
| // cache original event so that we can fire it when internal button is pressed | ||
| // We are going to override original event so that someone can manually trigger | ||
| // onclick via function call | ||
| this.originalOnclick = this.onclick; | ||
| } // If someone fires a click on the button and its type is submit then trigger fake button | ||
| // press | ||
| this.onclick = e => { | ||
| // call handle click and pass flag to be sure that handle click does not call | ||
| // us back. | ||
| this.handleClick(e, true); | ||
| }; | ||
| } | ||
| render() { | ||
| var { | ||
| type, | ||
| motionOff, | ||
| disabled, | ||
| variant = '', | ||
| icon = '', | ||
| size = '' | ||
| } = this; | ||
| var classes = { | ||
| 'a-button': true, | ||
| 'a-button--large': size === 'large', | ||
| 'a-button--small': size === 'small', | ||
| 'a-button--motion': !motionOff, | ||
| 'a-button--secondary': variant === 'secondary', | ||
| 'a-button--red': variant === 'red', | ||
| 'a-button--inverted': variant.includes('inverted'), | ||
| 'a-button--inverted-blue-ocean': variant === 'inverted-blue-ocean', | ||
| 'a-button--inverted-red-tosca': variant === 'inverted-red-tosca', | ||
| 'a-button--inverted-purple-logan': variant === 'inverted-purple-logan', | ||
| 'a-button--inverted-green-viridian': variant === 'inverted-green-viridian', | ||
| 'a-button--inverted-blue-teal': variant === 'inverted-blue-teal' | ||
| }; | ||
| return html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n <button\n type=\"", "\"\n class=\"", "\"\n ?disabled=\"", "\"\n @click=\"", "\"\n >\n <span class=\"a-button__flex-wrapper\">\n ", "\n <slot></slot>\n ", "\n </span>\n </button>\n "])), type, classMap(classes), disabled, this.handleClick, this.showIcon ? versionedHtml(this)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n <axa-icon class=\"a-button__icon\" icon=\"", "\"></axa-icon>\n "])), icon) : '', this.showArrow ? versionedHtml(this)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n <axa-icon class=\"a-button__arrow js-button__arrow\" icon=\"arrow-right\"></axa-icon>\n "]))) : ''); | ||
| } | ||
| disconnectedCallback() { | ||
| super.disconnectedCallback(); // remove installed observer, if any | ||
| this.watch('stop'); | ||
| } | ||
| } | ||
| /* eslint-disable no-undef */ | ||
| defineVersioned([AXAButton], { | ||
| "axa-button": { | ||
| "axa-button": "7.0.2", | ||
| "axa-icon": "7.0.2" | ||
| } | ||
| }); | ||
| var index_react = ((createElement, version) => withReact(createElement, AXAButton, version)); | ||
| export { index_react as default }; | ||
| import t from"@skatejs/val";import{html as n,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 s=(t,n)=>{const e=t.toLowerCase();return window.customElements.get(e)||window.customElements.define(e,n),e};const c=(t,n)=>{return`${t}-${e=n,`${e}`.replace(/\./g,"-").replace(/[^A-Za-z0-9-]/g,"")}`;var e},l=(t,n="",e="<")=>`${e}${n}${t}`,u=(t,n,e)=>l(c(t,n),e,"{"),d=(t,n,e)=>t.map((t=>t.split(l(n)).join(u(n,e)).split(l(n,"/")).join(u(n,e,"/")))),b=(t,n,e)=>{const o="string"==typeof n&&n;let r="";return t.forEach((t=>{const a=t instanceof HTMLElement?t.constructor:t,{tagName:i}=a,l=!o&&n[i];if(l){if(!window.customElements.get(i)&&a.versions)throw Error(`'versions' is a reserved class property, but was found in ${i}'s class`);a.versions=l,s(i,a)}let{versions:u}=a;!u&&e&&(u=n[e.constructor.tagName],u[i]=Object.values(u)[0]);const d=o||u[i];r=c(i,d),s(r,class extends a{})})),r},p=t=>(e,...o)=>{const r=t.constructor,[a,i]=(t=>{const{versions:n,tagName:e}=t,o=Object.keys(n).filter((t=>t!==e)).sort(((t,n)=>n.length-t.length));return[o,o.map((t=>n[t]))]})(r);let s=e;for(let t=0,n=a.length;t<n;t++)s=d(s,a[t],i[t]);for(let t=0,n=s.length;t<n;t++)s[t]=s[t].split("{").join("<");return s.raw=s,n(s,...o)},h=(t,n)=>{const e={},o={};let r;return Object.keys(t).forEach((a=>{const i=t[a];let s;const c=n.properties[a]||{},{type:l}=c;switch(s=0===a.indexOf("on")&&a.charAt(2)===a.charAt(2).toUpperCase()?Function:"className"===a?"className":l,s){case"className":case Array:case Object:case Function:case Boolean:r=o;break;default:r=l?o:e}void 0!==i&&(r[a]="style"===a?(t=>Object.keys(t).reduce(((n,e)=>{let o=n;return`${o+=e.split(/(?=[A-Z])/).join("-").toLowerCase()}:${t[e]};`}),""))(i):i)})),{attrs:e,props:o}};const f=t=>!(null==t),m=new Map;[[String,""],[Boolean,!1],[Object,{}],[Array,[]],[Number,0],[Function,()=>{}]].forEach((([t,n])=>{m.set(t,n)}));const v=()=>{},g=t=>{const{constructor:{properties:n}}=t;Object.keys(n).forEach((e=>{const o=n[e],{type:r,converter:a,defaultValue:i}=o;if(!r){if(!a)throw new Error(`<${t.nodeName}> property "${e}" is missing a type!`);return}let s=t[e];f(s)||(s=r===Boolean?t.hasAttribute(e):t.getAttribute(e),f(s)?t[e]=((t,n)=>n===Number?parseFloat(t):n===Function?v:n===Array||n===Object?JSON.parse(t):t)(s,r):void 0===i&&"defaultValue"in o||(t[e]="defaultValue"in o?i:m.get(r)))}))};const y={};class w extends e{inlineStyles(t="styles"){const n=this.getRootNode(),e=y[this.tagName]||new WeakMap,o=e.get(n)||{},r=(o.referenceCount||0)+1;if(o.referenceCount=r,e.set(n,r),y[this.tagName]=e,1===r){this.ownerDocument!==n&&(this._rootNode=n);const e=document.createElement("style");let r=this.constructor[t];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();(n instanceof ShadowRoot?n:document.head).appendChild(e),o.style=e}e.set(n,o),y[this.tagName]=e}disconnectedCallback(){super.disconnectedCallback();const t=y[this.tagName];if(!t)return;const n=this._rootNode||this.ownerDocument,e=t.get(n)||{},o=(e.referenceCount||0)-1;if(o<1){t.delete(n);const{style:o}=e;o&&o.parentNode&&o.parentNode.removeChild(o)}else e.referenceCount=o,t.set(n,e)}}const k=!!(window||global).ShadowRoot&&ShadowRoot.toString().indexOf("native code")>-1;class x extends w{static get tagName(){return"axa-button"}static get styles(){return o` | ||
| ${r(':host {\n display: inline-block;\n vertical-align: bottom;\n}\n\n.a-button {\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 box-sizing: border-box;\n padding: 0 30px;\n margin: 0;\n min-height: 40px;\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-transform: uppercase;\n color: #fff;\n background-color: #00008f;\n border: solid 2px #00008f;\n border-bottom-color: #00005b;\n}\n.a-button:hover, .a-button:active, .a-button:focus {\n cursor: pointer;\n text-decoration: none;\n background-color: #00005b;\n border-color: #00005b;\n outline: 0;\n}\n.a-button:disabled {\n color: #999;\n background-color: #e5e5e5;\n border-color: #e5e5e5;\n border-bottom-color: #ccc;\n pointer-events: none;\n}\n.a-button__flex-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.a-button__icon {\n display: flex;\n margin-right: 10px;\n}\n.a-button__arrow {\n display: flex;\n margin-left: 10px;\n}\n\n.a-button--large {\n min-height: 50px;\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--small {\n min-height: 30px;\n font-size: 14px;\n letter-spacing: 0.02em;\n line-height: 17px;\n font-family: "Source Sans Pro", Arial, sans-serif;\n}\n\n.a-button--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--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--motion:hover, .a-button--motion:focus {\n background-color: #00008f;\n color: #fff;\n}\n.a-button--motion:hover::after, .a-button--motion:focus::after {\n width: 110%;\n background-color: #00005b;\n}\n\n.a-button--red {\n background-color: #f07662;\n border-color: #f07662;\n border-bottom-color: #ec4d33;\n}\n.a-button--red:hover, .a-button--red:active, .a-button--red:focus {\n background-color: #ec4d33;\n border-color: #ec4d33;\n}\n.a-button--red.a-button--motion::after {\n background-color: #ec4d33;\n}\n.a-button--red.a-button--motion:hover, .a-button--red.a-button--motion:focus {\n background-color: #f07662;\n color: #fff;\n}\n.a-button--red.a-button--motion:hover::after, .a-button--red.a-button--motion:focus::after {\n background-color: #ec4d33;\n}\n\n.a-button--secondary {\n background-color: transparent;\n border-bottom-color: #00008f;\n color: #00008f;\n}\n.a-button--secondary:hover, .a-button--secondary:active, .a-button--secondary:focus {\n color: #fff;\n}\n.a-button--secondary.a-button--motion {\n background-color: transparent;\n}\n\n.a-button--inverted {\n background-color: transparent;\n border-color: #fff;\n color: #fff;\n}\n.a-button--inverted:hover, .a-button--inverted:active, .a-button--inverted:focus {\n background-color: #fff;\n border-color: #fff;\n color: #00005b;\n}\n.a-button--inverted.a-button--motion {\n background-color: transparent;\n}\n.a-button--inverted.a-button--motion::after {\n background-color: #fff;\n}\n\n.a-button--inverted-blue-ocean:hover, .a-button--inverted-blue-ocean:active, .a-button--inverted-blue-ocean:focus {\n color: #4976ba;\n}\n\n.a-button--inverted-red-tosca:hover, .a-button--inverted-red-tosca:active, .a-button--inverted-red-tosca:focus {\n color: #914146;\n}\n\n.a-button--inverted-purple-logan:hover, .a-button--inverted-purple-logan:active, .a-button--inverted-purple-logan:focus {\n color: #9190ac;\n}\n\n.a-button--inverted-green-viridian:hover, .a-button--inverted-green-viridian:active, .a-button--inverted-green-viridian:focus {\n color: #668980;\n}\n\n.a-button--inverted-blue-teal:hover, .a-button--inverted-blue-teal:active, .a-button--inverted-blue-teal:focus {\n color: #027180;\n}')} | ||
| `}static get blockMouseEventsCss(){return"axa-button {\n position: relative;\n}\naxa-button[disabled] {\n pointer-events: none;\n}"}static get properties(){return{type:{type:String,reflect:!0,defaultValue:"button"},variant:{type:String},icon:{type:String},size:{type:String},motionOff:{type:Boolean},disabled:{type:Boolean,reflect:!0},onClick:{type:Function,attribute:!1}}}constructor(){super(),g(this),b([i],{"axa-button":{"axa-button":"8.0.0","axa-icon":"8.0.0"}},this),this.handleClick=this.handleClick.bind(this)}get isTypeSubmitOrReset(){return"submit"===this.type||"reset"===this.type}get showIcon(){return this.icon&&"arrow-right"!==this.icon}get showArrow(){return"arrow-right"===this.icon}watch(t){switch(t){case"stop":this._observer&&this._observer.disconnect();break;case"start":this._observer||(this._observer=new MutationObserver((()=>this.attachFakeButton()))),this._observer.observe(this,{childList:!0})}}attachFakeButton(){const t=document.createElement("button");t.type=this.type,t.style.display="none",this.watch("stop"),this.appendChild(t),this.watch("start"),this.fakeButton=t}firstUpdated(){this.inlineStyles("blockMouseEventsCss");const{style:t}=this;k&&this.isTypeSubmitOrReset&&this.attachFakeButton(),t.appearance="none",t.mozAppearance="none",t.webkitAppearance="none",t.msAppearance="none",t.oAppearance="none","function"==typeof this.onclick&&(this.originalOnclick=this.onclick),this.onclick=t=>{this.handleClick(t,!0)}}handleClick(t,n=!1){const e=document.documentMode&&(t=>t.screenX||t.screenY||t.clientX||t.clientY)(t)&&k&&this.isTypeSubmitOrReset,o=t.isTrusted&&k&&this.isTypeSubmitOrReset;(e||o)&&(t.stopPropagation(),this.fakeButton.click());const r=this.onClick||this.originalOnclick;n||"function"!=typeof r||r(t)}render(){const{type:t,motionOff:e,disabled:o,variant:r="",icon:i="",size:s=""}=this,c={"a-button":!0,"a-button--large":"large"===s,"a-button--small":"small"===s,"a-button--motion":!e,"a-button--secondary":"secondary"===r,"a-button--red":"red"===r,"a-button--inverted":r.includes("inverted"),"a-button--inverted-blue-ocean":"inverted-blue-ocean"===r,"a-button--inverted-red-tosca":"inverted-red-tosca"===r,"a-button--inverted-purple-logan":"inverted-purple-logan"===r,"a-button--inverted-green-viridian":"inverted-green-viridian"===r,"a-button--inverted-blue-teal":"inverted-blue-teal"===r};return n` | ||
| <button | ||
| type="${t}" | ||
| class="${a(c)}" | ||
| ?disabled="${o}" | ||
| @click="${this.handleClick}" | ||
| > | ||
| <span class="a-button__flex-wrapper"> | ||
| ${this.showIcon?p(this)` | ||
| <axa-icon class="a-button__icon" icon="${i}"></axa-icon> | ||
| `:""} | ||
| <slot></slot> | ||
| ${this.showArrow?p(this)` | ||
| <axa-icon class="a-button__arrow js-button__arrow" icon="arrow-right"></axa-icon> | ||
| `:""} | ||
| </span> | ||
| </button> | ||
| `}disconnectedCallback(){super.disconnectedCallback(),this.watch("stop")}}b([x],{"axa-button":{"axa-button":"8.0.0","axa-icon":"8.0.0"}});var C=(n,e)=>((n,e,o)=>{const{tagName:r}=e,a=o?b([e],o):r,i=a.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join(""),s=({children:o,...r})=>{const{attrs:i,props:s}=h(r,e);return t(n)(a,{isReact:!0,attrs:i,...s},o)};return s.displayName=i,s})(n,x,e);export{C as default}; |
| { | ||
| "name": "@axa-ch/button", | ||
| "version": "7.0.2", | ||
| "version": "8.0.0", | ||
| "description": "The button 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-49.43%
65943
- Lines of code
- decreased by-75.94%
341
- 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