npm - @getflip/swirl-components - Versions diffs - 0.2.0 → 0.3.0 - Mend

@getflip/swirl-components 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1766) hide show

package/dist/cjs/bodyScrollLock.esm-f29f1a77.js ADDED Viewed

@@ -0,0 +1,258 @@
+'use strict';
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+// Older browsers don't support event options, feature detect it.
+// Adopted and modified solution from Bohdan Didukh (2017)
+// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi
+var hasPassiveEvents = false;
+if (typeof window !== 'undefined') {
+  var passiveTestOptions = {
+    get passive() {
+      hasPassiveEvents = true;
+      return undefined;
+    }
+  };
+  window.addEventListener('testPassive', null, passiveTestOptions);
+  window.removeEventListener('testPassive', null, passiveTestOptions);
+}
+var isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);
+var locks = [];
+var documentListenerAdded = false;
+var initialClientY = -1;
+var previousBodyOverflowSetting = void 0;
+var previousBodyPosition = void 0;
+var previousBodyPaddingRight = void 0;
+// returns true if `el` should be allowed to receive touchmove events.
+var allowTouchMove = function allowTouchMove(el) {
+  return locks.some(function (lock) {
+    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
+      return true;
+    }
+    return false;
+  });
+};
+var preventDefault = function preventDefault(rawEvent) {
+  var e = rawEvent || window.event;
+  // For the case whereby consumers adds a touchmove event listener to document.
+  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
+  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
+  // the touchmove event on document will break.
+  if (allowTouchMove(e.target)) {
+    return true;
+  }
+  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
+  if (e.touches.length > 1) return true;
+  if (e.preventDefault) e.preventDefault();
+  return false;
+};
+var setOverflowHidden = function setOverflowHidden(options) {
+  // If previousBodyPaddingRight is already set, don't set it again.
+  if (previousBodyPaddingRight === undefined) {
+    var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
+    var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
+    if (_reserveScrollBarGap && scrollBarGap > 0) {
+      var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
+      previousBodyPaddingRight = document.body.style.paddingRight;
+      document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px';
+    }
+  }
+  // If previousBodyOverflowSetting is already set, don't set it again.
+  if (previousBodyOverflowSetting === undefined) {
+    previousBodyOverflowSetting = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+  }
+};
+var restoreOverflowSetting = function restoreOverflowSetting() {
+  if (previousBodyPaddingRight !== undefined) {
+    document.body.style.paddingRight = previousBodyPaddingRight;
+    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
+    // can be set again.
+    previousBodyPaddingRight = undefined;
+  }
+  if (previousBodyOverflowSetting !== undefined) {
+    document.body.style.overflow = previousBodyOverflowSetting;
+    // Restore previousBodyOverflowSetting to undefined
+    // so setOverflowHidden knows it can be set again.
+    previousBodyOverflowSetting = undefined;
+  }
+};
+var setPositionFixed = function setPositionFixed() {
+  return window.requestAnimationFrame(function () {
+    // If previousBodyPosition is already set, don't set it again.
+    if (previousBodyPosition === undefined) {
+      previousBodyPosition = {
+        position: document.body.style.position,
+        top: document.body.style.top,
+        left: document.body.style.left
+      };
+      // Update the dom inside an animation frame
+      var _window = window,
+          scrollY = _window.scrollY,
+          scrollX = _window.scrollX,
+          innerHeight = _window.innerHeight;
+      document.body.style.position = 'fixed';
+      document.body.style.top = -scrollY;
+      document.body.style.left = -scrollX;
+      setTimeout(function () {
+        return window.requestAnimationFrame(function () {
+          // Attempt to check if the bottom bar appeared due to the position change
+          var bottomBarHeight = innerHeight - window.innerHeight;
+          if (bottomBarHeight && scrollY >= innerHeight) {
+            // Move the content further up so that the bottom bar doesn't hide it
+            document.body.style.top = -(scrollY + bottomBarHeight);
+          }
+        });
+      }, 300);
+    }
+  });
+};
+var restorePositionSetting = function restorePositionSetting() {
+  if (previousBodyPosition !== undefined) {
+    // Convert the position from "px" to Int
+    var y = -parseInt(document.body.style.top, 10);
+    var x = -parseInt(document.body.style.left, 10);
+    // Restore styles
+    document.body.style.position = previousBodyPosition.position;
+    document.body.style.top = previousBodyPosition.top;
+    document.body.style.left = previousBodyPosition.left;
+    // Restore scroll
+    window.scrollTo(x, y);
+    previousBodyPosition = undefined;
+  }
+};
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
+var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {
+  return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
+};
+var handleScroll = function handleScroll(event, targetElement) {
+  var clientY = event.targetTouches[0].clientY - initialClientY;
+  if (allowTouchMove(event.target)) {
+    return false;
+  }
+  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
+    // element is at the top of its scroll.
+    return preventDefault(event);
+  }
+  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
+    // element is at the bottom of its scroll.
+    return preventDefault(event);
+  }
+  event.stopPropagation();
+  return true;
+};
+var disableBodyScroll = function disableBodyScroll(targetElement, options) {
+  // targetElement must be provided
+  if (!targetElement) {
+    // eslint-disable-next-line no-console
+    console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');
+    return;
+  }
+  // disableBodyScroll must not have been called on this targetElement before
+  if (locks.some(function (lock) {
+    return lock.targetElement === targetElement;
+  })) {
+    return;
+  }
+  var lock = {
+    targetElement: targetElement,
+    options: options || {}
+  };
+  locks = [].concat(_toConsumableArray(locks), [lock]);
+  if (isIosDevice) {
+    setPositionFixed();
+  } else {
+    setOverflowHidden(options);
+  }
+  if (isIosDevice) {
+    targetElement.ontouchstart = function (event) {
+      if (event.targetTouches.length === 1) {
+        // detect single touch.
+        initialClientY = event.targetTouches[0].clientY;
+      }
+    };
+    targetElement.ontouchmove = function (event) {
+      if (event.targetTouches.length === 1) {
+        // detect single touch.
+        handleScroll(event, targetElement);
+      }
+    };
+    if (!documentListenerAdded) {
+      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      documentListenerAdded = true;
+    }
+  }
+};
+var enableBodyScroll = function enableBodyScroll(targetElement) {
+  if (!targetElement) {
+    // eslint-disable-next-line no-console
+    console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');
+    return;
+  }
+  locks = locks.filter(function (lock) {
+    return lock.targetElement !== targetElement;
+  });
+  if (isIosDevice) {
+    targetElement.ontouchstart = null;
+    targetElement.ontouchmove = null;
+    if (documentListenerAdded && locks.length === 0) {
+      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      documentListenerAdded = false;
+    }
+  }
+  if (isIosDevice) {
+    restorePositionSetting();
+  } else {
+    restoreOverflowSetting();
+  }
+};
+exports.disableBodyScroll = disableBodyScroll;
+exports.enableBodyScroll = enableBodyScroll;
+//# sourceMappingURL=bodyScrollLock.esm-f29f1a77.js.map

package/dist/cjs/bodyScrollLock.esm-f29f1a77.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"bodyScrollLock.esm-f29f1a77.js","mappings":"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","names":[],"sources":["../../node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js"],"sourcesContent":["function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\n// Older browsers don't support event options, feature detect it.\n\n// Adopted and modified solution from Bohdan Didukh (2017)\n// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi\n\nvar hasPassiveEvents = false;\nif (typeof window !== 'undefined') {\n var passiveTestOptions = {\n get passive() {\n hasPassiveEvents = true;\n return undefined;\n }\n };\n window.addEventListener('testPassive', null, passiveTestOptions);\n window.removeEventListener('testPassive', null, passiveTestOptions);\n}\n\nvar isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);\n\n\nvar locks = [];\nvar documentListenerAdded = false;\nvar initialClientY = -1;\nvar previousBodyOverflowSetting = void 0;\nvar previousBodyPosition = void 0;\nvar previousBodyPaddingRight = void 0;\n\n// returns true if `el` should be allowed to receive touchmove events.\nvar allowTouchMove = function allowTouchMove(el) {\n return locks.some(function (lock) {\n if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {\n return true;\n }\n\n return false;\n });\n};\n\nvar preventDefault = function preventDefault(rawEvent) {\n var e = rawEvent || window.event;\n\n // For the case whereby consumers adds a touchmove event listener to document.\n // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })\n // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then\n // the touchmove event on document will break.\n if (allowTouchMove(e.target)) {\n return true;\n }\n\n // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).\n if (e.touches.length > 1) return true;\n\n if (e.preventDefault) e.preventDefault();\n\n return false;\n};\n\nvar setOverflowHidden = function setOverflowHidden(options) {\n // If previousBodyPaddingRight is already set, don't set it again.\n if (previousBodyPaddingRight === undefined) {\n var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;\n var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;\n\n if (_reserveScrollBarGap && scrollBarGap > 0) {\n var computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);\n previousBodyPaddingRight = document.body.style.paddingRight;\n document.body.style.paddingRight = computedBodyPaddingRight + scrollBarGap + 'px';\n }\n }\n\n // If previousBodyOverflowSetting is already set, don't set it again.\n if (previousBodyOverflowSetting === undefined) {\n previousBodyOverflowSetting = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n};\n\nvar restoreOverflowSetting = function restoreOverflowSetting() {\n if (previousBodyPaddingRight !== undefined) {\n document.body.style.paddingRight = previousBodyPaddingRight;\n\n // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it\n // can be set again.\n previousBodyPaddingRight = undefined;\n }\n\n if (previousBodyOverflowSetting !== undefined) {\n document.body.style.overflow = previousBodyOverflowSetting;\n\n // Restore previousBodyOverflowSetting to undefined\n // so setOverflowHidden knows it can be set again.\n previousBodyOverflowSetting = undefined;\n }\n};\n\nvar setPositionFixed = function setPositionFixed() {\n return window.requestAnimationFrame(function () {\n // If previousBodyPosition is already set, don't set it again.\n if (previousBodyPosition === undefined) {\n previousBodyPosition = {\n position: document.body.style.position,\n top: document.body.style.top,\n left: document.body.style.left\n };\n\n // Update the dom inside an animation frame \n var _window = window,\n scrollY = _window.scrollY,\n scrollX = _window.scrollX,\n innerHeight = _window.innerHeight;\n\n document.body.style.position = 'fixed';\n document.body.style.top = -scrollY;\n document.body.style.left = -scrollX;\n\n setTimeout(function () {\n return window.requestAnimationFrame(function () {\n // Attempt to check if the bottom bar appeared due to the position change\n var bottomBarHeight = innerHeight - window.innerHeight;\n if (bottomBarHeight && scrollY >= innerHeight) {\n // Move the content further up so that the bottom bar doesn't hide it\n document.body.style.top = -(scrollY + bottomBarHeight);\n }\n });\n }, 300);\n }\n });\n};\n\nvar restorePositionSetting = function restorePositionSetting() {\n if (previousBodyPosition !== undefined) {\n // Convert the position from \"px\" to Int\n var y = -parseInt(document.body.style.top, 10);\n var x = -parseInt(document.body.style.left, 10);\n\n // Restore styles\n document.body.style.position = previousBodyPosition.position;\n document.body.style.top = previousBodyPosition.top;\n document.body.style.left = previousBodyPosition.left;\n\n // Restore scroll\n window.scrollTo(x, y);\n\n previousBodyPosition = undefined;\n }\n};\n\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions\nvar isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {\n return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;\n};\n\nvar handleScroll = function handleScroll(event, targetElement) {\n var clientY = event.targetTouches[0].clientY - initialClientY;\n\n if (allowTouchMove(event.target)) {\n return false;\n }\n\n if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {\n // element is at the top of its scroll.\n return preventDefault(event);\n }\n\n if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {\n // element is at the bottom of its scroll.\n return preventDefault(event);\n }\n\n event.stopPropagation();\n return true;\n};\n\nexport var disableBodyScroll = function disableBodyScroll(targetElement, options) {\n // targetElement must be provided\n if (!targetElement) {\n // eslint-disable-next-line no-console\n console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');\n return;\n }\n\n // disableBodyScroll must not have been called on this targetElement before\n if (locks.some(function (lock) {\n return lock.targetElement === targetElement;\n })) {\n return;\n }\n\n var lock = {\n targetElement: targetElement,\n options: options || {}\n };\n\n locks = [].concat(_toConsumableArray(locks), [lock]);\n\n if (isIosDevice) {\n setPositionFixed();\n } else {\n setOverflowHidden(options);\n }\n\n if (isIosDevice) {\n targetElement.ontouchstart = function (event) {\n if (event.targetTouches.length === 1) {\n // detect single touch.\n initialClientY = event.targetTouches[0].clientY;\n }\n };\n targetElement.ontouchmove = function (event) {\n if (event.targetTouches.length === 1) {\n // detect single touch.\n handleScroll(event, targetElement);\n }\n };\n\n if (!documentListenerAdded) {\n document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n documentListenerAdded = true;\n }\n }\n};\n\nexport var clearAllBodyScrollLocks = function clearAllBodyScrollLocks() {\n if (isIosDevice) {\n // Clear all locks ontouchstart/ontouchmove handlers, and the references.\n locks.forEach(function (lock) {\n lock.targetElement.ontouchstart = null;\n lock.targetElement.ontouchmove = null;\n });\n\n if (documentListenerAdded) {\n document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n documentListenerAdded = false;\n }\n\n // Reset initial clientY.\n initialClientY = -1;\n }\n\n if (isIosDevice) {\n restorePositionSetting();\n } else {\n restoreOverflowSetting();\n }\n\n locks = [];\n};\n\nexport var enableBodyScroll = function enableBodyScroll(targetElement) {\n if (!targetElement) {\n // eslint-disable-next-line no-console\n console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');\n return;\n }\n\n locks = locks.filter(function (lock) {\n return lock.targetElement !== targetElement;\n });\n\n if (isIosDevice) {\n targetElement.ontouchstart = null;\n targetElement.ontouchmove = null;\n\n if (documentListenerAdded && locks.length === 0) {\n document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n documentListenerAdded = false;\n }\n }\n\n if (isIosDevice) {\n restorePositionSetting();\n } else {\n restoreOverflowSetting();\n }\n};\n\n"],"version":3}

package/dist/cjs/flip-action-list-item.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 const flipActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{background-color:var(--s-surface-overlay-hovered);outline:none}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;padding-top:0.0625rem;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
@@ -22,3 +23,5 @@ const FlipActionListItem = class {
 FlipActionListItem.style = flipActionListItemCss;
 exports.flip_action_list_item = FlipActionListItem;
+//# sourceMappingURL=flip-action-list-item.cjs.entry.js.map

package/dist/cjs/flip-action-list-item.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-action-list-item.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,qBAAqB,GAAG,usDAAusD;;MCYxtD,kBAAkB;EAL/B;;IASU,WAAM,GAA8B,SAAS,CAAC;IAE9C,SAAI,GAA4B,GAAG,CAAC;GA0C7C;EAvCC,MAAM;IACJ,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAE1D,MAAM,SAAS,GAAGA,kBAAU,CAC1B,kBAAkB,EAClB,4BAA4B,IAAI,CAAC,MAAM,EAAE,EACzC,0BAA0B,IAAI,CAAC,IAAI,EAAE,CACtC,CAAC;IAEF,QACEC,QAACC,UAAI,QACHD,oBACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,IAAI,KACRA,kBAAM,KAAK,EAAC,wBAAwB,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,CACnE,EACDA,kBAAM,KAAK,EAAC,mCAAmC,IAC7CA,kBAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACxD,IAAI,CAAC,WAAW,KACfA,kBAAM,KAAK,EAAC,+BAA+B,IACxC,IAAI,CAAC,WAAW,CACZ,CACR,CACI,EACN,UAAU,KACTA,kBACE,KAAK,EAAC,0BAA0B,EAChC,SAAS,EAAE,IAAI,CAAC,MAAM,GAChB,CACT,CACM,CACJ,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-action-list-item/flip-action-list-item.css?tag=flip-action-list-item&encapsulation=shadow","./src/components/flip-action-list-item/flip-action-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.action-list-item {\n display: inline-flex;\n width: 100%;\n min-width: 15rem;\n margin: 0;\n padding: var(--s-space-12) var(--s-space-16);\n justify-content: flex-start;\n align-items: center;\n border: none;\n color: var(--s-text-default);\n background-color: var(--s-surface-overlay-default);\n font: inherit;\n line-height: var(--s-line-height-base);\n text-align: left;\n cursor: pointer;\n gap: var(--s-space-12);\n\n &:hover {\n background-color: var(--s-surface-overlay-hovered);\n }\n\n &:focus {\n background-color: var(--s-surface-overlay-hovered);\n outline: none;\n }\n\n &:active {\n background-color: var(--s-surface-overlay-pressed);\n }\n\n &:disabled {\n background-color: var(--s-surface-overlay-default);\n cursor: default;\n\n & .action-list-item__label,\n & .action-list-item__description {\n color: var(--s-text-disabled);\n }\n\n & .action-list-item__icon {\n color: var(--s-icon-disabled);\n }\n }\n}\n\n.action-list-item--size-l {\n padding: var(--s-space-16);\n}\n\n.action-list-item--intent-critical {\n &:not(:disabled) {\n & .action-list-item__label {\n color: var(--s-text-critical);\n }\n\n & .action-list-item__icon {\n color: var(--s-icon-critical);\n }\n }\n}\n\n.action-list-item__icon {\n display: inline-flex;\n flex-shrink: 0;\n color: var(--s-icon-default);\n}\n\n.action-list-item__label-container {\n display: inline-flex;\n min-width: 0;\n flex-grow: 1;\n align-items: flex-start;\n flex-direction: column;\n}\n\n.action-list-item__label {\n overflow: hidden;\n max-width: 100%;\n padding-top: 0.0625rem;\n font-weight: var(--s-font-weight-medium);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.action-list-item__description {\n color: var(--s-text-subdued);\n}\n\n.action-list-item__suffix {\n display: inline-flex;\n flex-shrink: 0;\n color: var(--s-icon-highlight);\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipActionListItemIntent = \"default\" | \"critical\";\n\nexport type FlipActionListItemSize = \"m\" | \"l\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-action-list-item.css\",\n tag: \"flip-action-list-item\",\n})\nexport class FlipActionListItem {\n @Prop() disabled?: boolean;\n @Prop() description?: string;\n @Prop() icon?: string;\n @Prop() intent?: FlipActionListItemIntent = \"default\";\n @Prop() label!: string;\n @Prop() size?: FlipActionListItemSize = \"m\";\n @Prop() suffix?: string;\n\n render() {\n const showSuffix = Boolean(this.suffix) && !this.disabled;\n\n const className = classnames(\n \"action-list-item\",\n `action-list-item--intent-${this.intent}`,\n `action-list-item--size-${this.size}`\n );\n\n return (\n <Host>\n <button\n class={className}\n disabled={this.disabled}\n role=\"menuitem\"\n tabIndex={-1}\n type=\"button\"\n >\n {this.icon && (\n <span class=\"action-list-item__icon\" innerHTML={this.icon}></span>\n )}\n <span class=\"action-list-item__label-container\">\n <span class=\"action-list-item__label\">{this.label}</span>\n {this.description && (\n <span class=\"action-list-item__description\">\n {this.description}\n </span>\n )}\n </span>\n {showSuffix && (\n <span\n class=\"action-list-item__suffix\"\n innerHTML={this.suffix}\n ></span>\n )}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-action-list-section.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
+const index = require('./index-72831c5f.js');
 const flipActionListSectionCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-section{background-color:var(--s-surface-overlay-default)}.action-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}";
@@ -17,3 +17,5 @@ const FlipActionListSection = class {
 FlipActionListSection.style = flipActionListSectionCss;
 exports.flip_action_list_section = FlipActionListSection;
+//# sourceMappingURL=flip-action-list-section.cjs.entry.js.map

package/dist/cjs/flip-action-list-section.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-action-list-section.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,wBAAwB,GAAG,+ZAA+Z;;MCUnb,qBAAqB;;;;EAGhC,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,oCAAqB,OAAO,EAAC,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,OAAO,IACnEA,kBAAM,KAAK,EAAC,4BAA4B,EAAC,EAAE,EAAC,OAAO,IAChD,IAAI,CAAC,KAAK,CACN,EACPA,iBAAK,KAAK,EAAC,4BAA4B,IACrCA,qBAAa,CACT,CACF,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/flip-action-list-section/flip-action-list-section.css?tag=flip-action-list-section&encapsulation=shadow","./src/components/flip-action-list-section/flip-action-list-section.tsx"],"sourcesContent":[":host {\n display: block;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.action-list-section {\n background-color: var(--s-surface-overlay-default);\n}\n\n.action-list-section__label {\n display: block;\n width: 100%;\n padding: var(--s-space-8) var(--s-space-16);\n border-bottom: var(--s-border-width-default) solid var(--s-border-default);\n color: var(--s-text-subdued);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-base);\n text-align: left;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\n\n/**\n * @slot slot - The action list item components\n */\n@Component({\n shadow: true,\n styleUrl: \"flip-action-list-section.css\",\n tag: \"flip-action-list-section\",\n})\nexport class FlipActionListSection {\n @Prop() label!: string;\n\n render() {\n return (\n <Host>\n <div aria-labelledby=\"label\" class=\"action-list-section\" role=\"group\">\n <span class=\"action-list-section__label\" id=\"label\">\n {this.label}\n </span>\n <div class=\"action-list-section__items\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-action-list.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
-const utils = require('./utils-a6e2e7da.js');
+const index = require('./index-72831c5f.js');
+const utils = require('./utils-9018ae5a.js');
 const flipActionListCss = ":host{display:block}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}";
@@ -50,3 +50,5 @@ const FlipActionList = class {
 FlipActionList.style = flipActionListCss;
 exports.flip_action_list = FlipActionList;
+//# sourceMappingURL=flip-action-list.cjs.entry.js.map

package/dist/cjs/flip-action-list.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-action-list.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,mHAAmH;;MCWhI,cAAc;EAL3B;;IAcU,cAAS,GAAG,CAAC,KAAoB;MACvC,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,IAAI,KAAK,CAAC,IAAI,KAAK,YAAY,EAAE;QAC7D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,EAAE,CAAC;OACtB;WAAM,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE;QACjE,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC1B;KACF,CAAC;GAwCH;EApDC,gBAAgB;IACd,IAAI,CAAC,KAAK,GAAGA,0BAAoB,CAAC,IAAI,CAAC,EAAE,EAAE,mBAAmB,CAAC,CAAC;GACjE;EAYO,aAAa;IACnB,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAClD,MAAM,QAAQ,GAAG,CAAC,eAAe,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;IAE3D,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;GAC9B;EAEO,iBAAiB;IACvB,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAClD,MAAM,QAAQ,GACZ,eAAe,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,GAAG,CAAC,CAAC;IAEtE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;GAC9B;EAEO,kBAAkB;IACxB,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CACzB,CAAC,IAAI;;MACH,OAAA,IAAI,KAAK,QAAQ,CAAC,aAAa;QAC/B,IAAI;WACF,MAAA,MAAA,QAAQ,CAAC,aAAa,0CAAE,UAAU,0CAAE,aAAa,CAAC,mBAAmB,CAAC,CAAA,CAAA;KAAA,CAC3E,CAAC;GACH;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,QACHD,qCACmB,UAAU,EAC3B,KAAK,EAAC,aAAa,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAC,MAAM,IAEXA,qBAAa,CACT,CACD,EACP;GACH;;;;;;;","names":["querySelectorAllDeep","h","Host"],"sources":["./src/components/flip-action-list/flip-action-list.css?tag=flip-action-list&encapsulation=shadow","./src/components/flip-action-list/flip-action-list.tsx"],"sourcesContent":[":host {\n display: block;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.action-list {\n background-color: var(--s-surface-overlay-default);\n}\n","import { Component, Element, h, Host } from \"@stencil/core\";\nimport { querySelectorAllDeep } from \"../../utils\";\n\n/**\n * @slot slot - The action list items and sections\n */\n@Component({\n shadow: true,\n styleUrl: \"flip-action-list.css\",\n tag: \"flip-action-list\",\n})\nexport class FlipActionList {\n @Element() el: HTMLElement;\n\n private items: HTMLElement[];\n\n componentDidLoad() {\n this.items = querySelectorAllDeep(this.el, '[role=\"menuitem\"]');\n }\n\n private onKeyDown = (event: KeyboardEvent) => {\n if (event.code === \"ArrowDown\" || event.code === \"ArrowRight\") {\n event.preventDefault();\n this.focusNextItem();\n } else if (event.code === \"ArrowUp\" || event.code === \"ArrowLeft\") {\n event.preventDefault();\n this.focusPreviousItem();\n }\n };\n\n private focusNextItem() {\n const activeItemIndex = this.getActiveItemIndex();\n const newIndex = (activeItemIndex + 1) % this.items.length;\n\n this.items[newIndex].focus();\n }\n\n private focusPreviousItem() {\n const activeItemIndex = this.getActiveItemIndex();\n const newIndex =\n activeItemIndex === 0 ? this.items.length - 1 : activeItemIndex - 1;\n\n this.items[newIndex].focus();\n }\n\n private getActiveItemIndex(): number {\n return this.items.findIndex(\n (item) =>\n item === document.activeElement ||\n item ===\n document.activeElement?.shadowRoot?.querySelector('[role=\"menuitem\"]')\n );\n }\n\n render() {\n return (\n <Host>\n <div\n aria-orientation=\"vertical\"\n class=\"action-list\"\n onKeyDown={this.onKeyDown}\n role=\"menu\"\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-avatar-group.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 const flipAvatarGroupCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(8, 1fr);grid-template-columns:repeat(8, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;border:0.25rem solid var(--flip-avatar-group-border-color);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:3;grid-row-end:9}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border:0.25rem solid var(--flip-avatar-group-border-color);border-radius:50%;grid-column-start:3;grid-column-end:9;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:0;bottom:0;display:inline-flex;width:1.5rem;height:1.5rem}";
@@ -22,3 +23,5 @@ const FlipAvatarGroup = class {
 FlipAvatarGroup.style = flipAvatarGroupCss;
 exports.flip_avatar_group = FlipAvatarGroup;
+//# sourceMappingURL=flip-avatar-group.cjs.entry.js.map

package/dist/cjs/flip-avatar-group.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-avatar-group.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,kBAAkB,GAAG,2tBAA2tB;;MCWzuB,eAAe;;;;EAG1B,MAAM;IACJ,MAAM,SAAS,GAAGA,kBAAU,CAAC,cAAc,EAAE;MAC3C,yBAAyB,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;KAC/C,CAAC,CAAC;IAEH,MAAM,cAAc,GAAGA,kBAAU,CAAC,qBAAqB,CAAC,CAAC;IAEzD,QACEC,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,IACjCA,qBAAa,EACZ,IAAI,CAAC,KAAK,KACTA,kBAAM,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,GAAS,CAC5D,CACG,CACD,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-avatar-group/flip-avatar-group.css?tag=flip-avatar-group&encapsulation=shadow","./src/components/flip-avatar-group/flip-avatar-group.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.avatar-group {\n position: relative;\n display: inline-grid;\n grid-template-rows: repeat(8, 1fr);\n grid-template-columns: repeat(8, 1fr);\n\n & ::slotted(*:first-of-type) {\n z-index: 1;\n display: inline-flex;\n border: 0.25rem solid var(--flip-avatar-group-border-color);\n border-radius: 50%;\n grid-column-start: 1;\n grid-column-end: 7;\n grid-row-start: 3;\n grid-row-end: 9;\n }\n\n & ::slotted(*:nth-of-type(2)) {\n z-index: 0;\n display: inline-flex;\n border: 0.25rem solid var(--flip-avatar-group-border-color);\n border-radius: 50%;\n grid-column-start: 3;\n grid-column-end: 9;\n grid-row-start: 1;\n grid-row-end: 7;\n }\n}\n\n.avatar-group__badge {\n position: absolute;\n z-index: 2;\n right: 0;\n bottom: 0;\n display: inline-flex;\n width: 1.5rem;\n height: 1.5rem;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n/**\n * @slot slot - Your avatar components\n */\n@Component({\n shadow: true,\n styleUrl: \"flip-avatar-group.css\",\n tag: \"flip-avatar-group\",\n})\nexport class FlipAvatarGroup {\n @Prop() badge?: string;\n\n render() {\n const className = classnames(\"avatar-group\", {\n \"avatar-group--has-badge\": Boolean(this.badge),\n });\n\n const badgeClassName = classnames(\"avatar-group__badge\");\n\n return (\n <Host>\n <div class={className} role=\"group\">\n <slot></slot>\n {this.badge && (\n <span class={badgeClassName} innerHTML={this.badge}></span>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-avatar.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 const flipAvatarCss = ":host{display:inline-flex;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--s-surface-raised-default)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus{outline-color:var(--s-focus-default)}.avatar--size-xs{width:1.75rem;height:1.75rem;font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem;font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem;font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem;font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem;font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem;font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:2.25rem}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%}.avatar__icon{display:inline-flex;width:100%;height:100%}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{display:inline-flex;width:100%;min-width:0;height:100%;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;background-color:var(--s-decorative-6-default)}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}";
@@ -76,3 +77,5 @@ const FlipAvatar = class {
 FlipAvatar.style = flipAvatarCss;
 exports.flip_avatar = FlipAvatar;
+//# sourceMappingURL=flip-avatar.cjs.entry.js.map

package/dist/cjs/flip-avatar.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-avatar.entry.cjs.js","mappings":"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","names":["classnames","h","Host"],"sources":["./src/components/flip-avatar/flip-avatar.css?tag=flip-avatar&encapsulation=shadow","./src/components/flip-avatar/flip-avatar.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: center;\n flex-direction: column;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.avatar {\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n.avatar--has-icon {\n color: var(--s-icon-default);\n background-color: var(--s-surface-raised-default);\n}\n\n.avatar--has-initials {\n padding-right: 0;\n padding-left: 0;\n color: #fff;\n}\n\n.avatar--interactive {\n cursor: pointer;\n\n &:focus {\n outline-color: var(--s-focus-default);\n }\n}\n\n.avatar--size-xs {\n width: 1.75rem;\n height: 1.75rem;\n font-size: 0.75rem;\n\n &.avatar--has-icon {\n padding-right: 0.4375rem;\n padding-left: 0.4375rem;\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 0.5rem;\n }\n}\n\n.avatar--size-s {\n width: 2rem;\n height: 2rem;\n font-size: 0.75rem;\n\n &.avatar--has-icon {\n padding-right: var(--s-space-8);\n padding-left: var(--s-space-8);\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 0.5rem;\n }\n}\n\n.avatar--size-m {\n width: 2.5rem;\n height: 2.5rem;\n font-size: var(--s-font-size-base);\n\n &.avatar--has-icon {\n padding-right: 0.625rem;\n padding-left: 0.625rem;\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 0.625rem;\n }\n}\n\n.avatar--size-l {\n width: 3rem;\n height: 3rem;\n font-size: var(--s-font-size-lg);\n\n &.avatar--has-icon {\n padding-right: var(--s-space-12);\n padding-left: var(--s-space-12);\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 0.75rem;\n }\n}\n\n.avatar--size-xl {\n width: 4rem;\n height: 4rem;\n font-size: var(--s-font-size-xl);\n\n &.avatar--has-icon {\n padding-right: var(--s-space-16);\n padding-left: var(--s-space-16);\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 1rem;\n }\n}\n\n.avatar--size-2xl {\n width: 9rem;\n height: 9rem;\n font-size: 3.375rem;\n\n &.avatar--has-icon {\n padding-right: var(--s-space-32);\n padding-left: var(--s-space-32);\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 2.25rem;\n }\n}\n\n.avatar__image {\n overflow: hidden;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n\n & > img {\n width: 100%;\n height: 100%;\n }\n}\n\n.avatar__icon {\n display: inline-flex;\n width: 100%;\n height: 100%;\n\n & > * {\n width: 100%;\n height: 100%;\n }\n\n & > *::part(icon) {\n width: 100%;\n height: 100%;\n }\n}\n\n.avatar__initials {\n display: inline-flex;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding-right: 0.0625rem;\n padding-left: 0.0625rem;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n background-color: var(--s-decorative-6-default);\n\n & > span {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n}\n\n.avatar__badge {\n position: absolute;\n bottom: 0;\n left: 55%;\n display: inline-flex;\n min-width: 1.5rem;\n height: 1.5rem;\n transform: translate3d(0, 25%, 0);\n}\n\n.avatar__badge--position-top {\n top: 0;\n bottom: auto;\n transform: translate3d(0, -25%, 0);\n}\n\n.avatar__label {\n margin-top: var(--s-space-4);\n color: var(--s-icon-default);\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-sm);\n text-align: center;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipAvatarBadgePosition = \"bottom\" | \"top\";\nexport type FlipAvatarSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"2xl\";\nexport type FlipAvatarVariant = \"round\" | \"square\";\n\nconst flipAvatarSizeMappings: { [key in FlipAvatarSize]: number } = {\n xs: 28,\n s: 32,\n m: 40,\n l: 48,\n xl: 64,\n \"2xl\": 144,\n};\n\n@Component({\n shadow: true,\n styleUrl: \"flip-avatar.css\",\n tag: \"flip-avatar\",\n})\nexport class FlipAvatar {\n @Element() element: HTMLElement;\n\n @Prop() badge?: string;\n @Prop() badgePosition?: FlipAvatarBadgePosition = \"bottom\";\n @Prop() icon?: string;\n @Prop() initials?: string;\n @Prop() interactive?: boolean = false;\n @Prop() label!: string;\n @Prop() showLabel?: boolean = false;\n @Prop() size?: FlipAvatarSize = \"m\";\n @Prop() src?: string;\n @Prop() variant?: FlipAvatarVariant = \"round\";\n\n @State() imageAvailable: boolean | undefined;\n\n @Watch(\"src\")\n watchSrcProp() {\n this.imageAvailable = undefined;\n }\n\n private setImageAvailable = () => {\n this.imageAvailable = true;\n };\n\n private setImageUnavailable = () => {\n this.imageAvailable = false;\n };\n\n private onKeydown = (event: KeyboardEvent) => {\n // The interactive avatar is activated by the space key on the keyup event,\n // but the default action for space is already triggered on keydown. It\n // needs to be prevented to stop scrolling the page before activating the\n // avatar.\n if (event.code === \"Space\") {\n event.preventDefault();\n } else if (event.code === \"Enter\") {\n event.preventDefault();\n\n this.element.click();\n }\n };\n\n private onKeyup = (event: KeyboardEvent) => {\n if (event.code === \"Space\") {\n event.preventDefault();\n\n this.element.click();\n }\n };\n\n render() {\n const showImage =\n Boolean(this.src) &&\n (this.imageAvailable || this.imageAvailable === undefined);\n\n const showInitials = !showImage && Boolean(this.initials);\n const showIcon = !showImage && !showInitials && Boolean(this.icon);\n const showFallbackIcon = !showImage && !showInitials && !showIcon;\n const showBadge = Boolean(this.badge) && this.size === \"m\";\n\n const role = this.interactive ? \"button\" : \"img\";\n\n const className = classnames(\n \"avatar\",\n `avatar--size-${this.size}`,\n `avatar--variant-${this.variant}`,\n {\n \"avatar--has-icon\": showIcon || showFallbackIcon,\n \"avatar--has-initials\": showInitials,\n \"avatar--interactive\": this.interactive,\n }\n );\n\n const badgeClassName = classnames(\n \"avatar__badge\",\n `avatar__badge--position-${this.badgePosition}`\n );\n\n return (\n <Host\n aria-label={this.label}\n onKeydown={this.interactive ? this.onKeydown : undefined}\n onKeyup={this.interactive ? this.onKeyup : undefined}\n role={role}\n tabIndex={this.interactive ? 0 : undefined}\n >\n <span class={className} part=\"avatar\">\n {showImage && (\n <span class=\"avatar__image\">\n <img\n alt=\"\"\n height={flipAvatarSizeMappings[this.size]}\n onError={this.setImageUnavailable}\n onLoad={this.setImageAvailable}\n src={this.src}\n width={flipAvatarSizeMappings[this.size]}\n />\n </span>\n )}\n {showInitials && (\n <span class=\"avatar__initials\">\n <span>{this.initials}</span>\n </span>\n )}\n {showIcon && <span class=\"avatar__icon\" innerHTML={this.icon}></span>}\n {showFallbackIcon && (\n <span class=\"avatar__icon\">\n <flip-icon-person></flip-icon-person>\n </span>\n )}\n {showBadge && (\n <span class={badgeClassName} innerHTML={this.badge}></span>\n )}\n </span>\n\n {this.showLabel && (\n <span aria-hidden class=\"avatar__label\">\n {this.label}\n </span>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-badge.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 const flipBadgeCss = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border:0.25rem solid var(--flip-badge-border-color);border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium)}.badge--size-s{min-width:1.5rem;height:1.5rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.1875rem;padding-left:0.1875rem}.badge--size-s .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-m{min-width:2rem;height:2rem}.badge--size-m .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{background-color:var(--s-surface-critical-default)}.badge--intent-decorative-1{background-color:var(--s-decorative-1-default)}.badge--intent-decorative-2{background-color:var(--s-decorative-2-default)}.badge--intent-decorative-3{color:var(--s-text-default);background-color:var(--s-decorative-3-default)}.badge--intent-decorative-4{color:var(--s-text-default);background-color:var(--s-decorative-4-default)}.badge--intent-decorative-5{background-color:var(--s-decorative-5-default)}.badge--intent-decorative-6{background-color:var(--s-decorative-6-default)}.badge--intent-decorative-7{background-color:var(--s-decorative-7-default)}.badge--variant-dot{width:1.25rem;min-width:0;height:1.25rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__label,.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}";
@@ -24,3 +25,5 @@ const FlipBadge = class {
 FlipBadge.style = flipBadgeCss;
 exports.flip_badge = FlipBadge;
+//# sourceMappingURL=flip-badge.cjs.entry.js.map

package/dist/cjs/flip-badge.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-badge.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,mxDAAmxD;;MCuB3xD,SAAS;EALtB;;IAOU,WAAM,GAAqB,UAAU,CAAC;IAEtC,SAAI,GAAmB,GAAG,CAAC;IAC3B,YAAO,GAAsB,SAAS,CAAC;GAwBhD;EAtBC,MAAM;IACJ,MAAM,SAAS,GAAGA,kBAAU,CAC1B,OAAO,EACP,iBAAiB,IAAI,CAAC,MAAM,EAAE,EAC9B,eAAe,IAAI,CAAC,IAAI,EAAE,EAC1B,kBAAkB,IAAI,CAAC,OAAO,EAAE,EAChC;MACE,iBAAiB,EAAE,IAAI,CAAC,IAAI;KAC7B,CACF,CAAC;IAEF,QACEC,QAACC,UAAI,IAAC,IAAI,EAAC,QAAQ,IACjBD,kBAAM,KAAK,EAAE,SAAS,IACnB,IAAI,CAAC,IAAI,IAAIA,kBAAM,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,EACpE,IAAI,CAAC,IAAI,KAAK,SAAS,KACtBA,kBAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC/C,CACI,CACF,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-badge/flip-badge.css?tag=flip-badge&encapsulation=shadow","./src/components/flip-badge/flip-badge.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n min-width: 0;\n max-width: 100%;\n justify-content: center;\n align-items: center;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.badge {\n display: inline-flex;\n max-width: 100%;\n justify-content: center;\n align-items: center;\n border: 0.25rem solid var(--flip-badge-border-color);\n border-radius: 2rem;\n color: var(--s-text-on-status);\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n}\n\n.badge--size-s {\n min-width: 1.5rem;\n height: 1.5rem;\n font-size: 0.75rem;\n\n & .badge__label {\n padding-right: 0.1875rem;\n padding-left: 0.1875rem;\n }\n\n & .badge__icon {\n & > *::part(icon) {\n width: 0.75rem;\n height: 0.75rem;\n }\n }\n}\n\n.badge--size-m {\n min-width: 2rem;\n height: 2rem;\n\n & .badge__label {\n padding-right: 0.375rem;\n padding-left: 0.375rem;\n }\n}\n\n.badge--has-icon {\n padding-right: 0;\n padding-left: 0;\n}\n\n.badge--intent-critical {\n background-color: var(--s-surface-critical-default);\n}\n\n.badge--intent-decorative-1 {\n background-color: var(--s-decorative-1-default);\n}\n\n.badge--intent-decorative-2 {\n background-color: var(--s-decorative-2-default);\n}\n\n.badge--intent-decorative-3 {\n color: var(--s-text-default);\n background-color: var(--s-decorative-3-default);\n}\n\n.badge--intent-decorative-4 {\n color: var(--s-text-default);\n background-color: var(--s-decorative-4-default);\n}\n\n.badge--intent-decorative-5 {\n background-color: var(--s-decorative-5-default);\n}\n\n.badge--intent-decorative-6 {\n background-color: var(--s-decorative-6-default);\n}\n\n.badge--intent-decorative-7 {\n background-color: var(--s-decorative-7-default);\n}\n\n.badge--variant-dot {\n width: 1.25rem;\n min-width: 0;\n height: 1.25rem;\n\n & .badge__label {\n padding-right: 0;\n padding-left: 0;\n }\n\n & .badge__label,\n & .badge__icon {\n display: none;\n }\n}\n\n.badge__icon {\n display: inline-flex;\n\n & > *::part(icon) {\n width: 1rem;\n height: 1rem;\n }\n}\n\n.badge__label {\n display: inline-flex;\n overflow: hidden;\n max-width: 100%;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n","import classnames from \"classnames\";\n\nimport { Component, h, Host, Prop } from \"@stencil/core\";\n\nexport type FlipBadgeIntent =\n | \"critical\"\n | \"decorative-1\"\n | \"decorative-2\"\n | \"decorative-3\"\n | \"decorative-4\"\n | \"decorative-5\"\n | \"decorative-6\"\n | \"decorative-7\";\n\nexport type FlipBadgeSize = \"s\" | \"m\";\n\nexport type FlipBadgeVariant = \"default\" | \"dot\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-badge.css\",\n tag: \"flip-badge\",\n})\nexport class FlipBadge {\n @Prop() icon?: string;\n @Prop() intent?: FlipBadgeIntent = \"critical\";\n @Prop() label!: string;\n @Prop() size?: FlipBadgeSize = \"m\";\n @Prop() variant?: FlipBadgeVariant = \"default\";\n\n render() {\n const className = classnames(\n \"badge\",\n `badge--intent-${this.intent}`,\n `badge--size-${this.size}`,\n `badge--variant-${this.variant}`,\n {\n \"badge--has-icon\": this.icon,\n }\n );\n\n return (\n <Host role=\"status\">\n <span class={className}>\n {this.icon && <span class=\"badge__icon\" innerHTML={this.icon}></span>}\n {this.icon === undefined && (\n <span class=\"badge__label\">{this.label}</span>\n )}\n </span>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-banner.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 const flipBannerCss = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;max-width:100%;padding:var(--s-space-12);align-items:flex-start}.banner:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner{padding:var(--s-space-16)}}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}@media (min-width: 375px){.banner--has-icon .banner__content{padding-top:var(--s-space-2)}}.banner__icon{display:none;margin-right:var(--s-space-8);color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}.banner__content{min-height:1.5rem;margin-right:var(--s-space-12);flex-grow:1;line-height:var(--s-line-height-base)}.banner__controls{display:inline-flex;margin-left:var(--s-space-16);align-items:center;gap:var(--s-space-16);line-height:var(--s-line-height-base)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}";
@@ -45,3 +46,5 @@ const FlipBanner = class {
 FlipBanner.style = flipBannerCss;
 exports.flip_banner = FlipBanner;
+//# sourceMappingURL=flip-banner.cjs.entry.js.map

package/dist/cjs/flip-banner.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-banner.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,ikFAAikF;;ACoBvlF,MAAM,qBAAqB,GAA0C;EACnE,OAAO,EAAE,SAAS;EAClB,QAAQ,EAAE,qCAAqC;EAC/C,OAAO,EAAE,mDAAmD;EAC5D,OAAO,EAAE,yCAAyC;EAClD,IAAI,EAAE,mCAAmC;CAC1C,CAAC;MAOW,UAAU;EALvB;;;;IAUU,gBAAW,GAAa,KAAK,CAAC;IAC9B,iBAAY,GAAY,SAAS,CAAC;IAClC,eAAU,GAAwB,QAAQ,CAAC;IAC3C,WAAM,GAAsB,SAAS,CAAC;IACtC,aAAQ,GAAa,KAAK,CAAC;IAKnC,aAAQ,GAAG,CAAC,KAAiB;MAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACzB,CAAC;IAEF,cAAS,GAAG,CAAC,KAAiB;MAC5B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC1B,CAAC;GAwDH;EAtDC,MAAM;IACJ,MAAM,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC;IACnE,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAEhD,MAAM,SAAS,GAAGA,kBAAU,CAAC,QAAQ,EAAE,kBAAkB,IAAI,CAAC,MAAM,EAAE,EAAE;MACtE,kBAAkB,EAAE,QAAQ;KAC7B,CAAC,CAAC;IAEH,QACEC,QAACC,UAAI,QACHD,qCACmB,SAAS,EAC1B,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,QAAQ,EAAE,CAAC,IAEV,QAAQ,KACPA,iCACc,MAAM,EAClB,KAAK,EAAC,cAAc,EACpB,SAAS,EAAE,IAAI,GACT,CACT,EACDA,kBAAM,KAAK,EAAC,iBAAiB,EAAC,EAAE,EAAC,SAAS,IACvC,IAAI,CAAC,OAAO,CACR,EACN,YAAY,KACXA,kBAAM,KAAK,EAAC,kBAAkB,IAC3B,IAAI,CAAC,WAAW,KACfA,oBACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,WAAW,CACV,CACV,EACA,IAAI,CAAC,WAAW,KACfA,kCACc,IAAI,CAAC,YAAY,EAC7B,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,IAAI,EAAC,QAAQ,IAEbA,gCAAmC,CAC5B,CACV,CACI,CACR,CACG,CACD,EACP;GACH;;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-banner/flip-banner.css?tag=flip-banner&encapsulation=shadow","./src/components/flip-banner/flip-banner.tsx"],"sourcesContent":["@import \"../../styles/media-queries.css\";\n\n:host {\n display: block;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.banner {\n display: flex;\n max-width: 100%;\n padding: var(--s-space-12);\n align-items: flex-start;\n\n &:focus {\n outline-color: var(--s-focus-default);\n }\n\n @media (--from-tablet) {\n padding: var(--s-space-16);\n }\n}\n\n.banner--intent-default,\n.banner--intent-critical,\n.banner--intent-success,\n.banner--intent-info {\n & .banner__icon,\n & .banner__content,\n & .banner__action-button,\n & .banner__dismiss-button {\n color: var(--s-text-on-status);\n }\n}\n\n.banner--intent-default {\n background-color: var(--s-surface-neutral-default);\n}\n\n.banner--intent-critical {\n background-color: var(--s-surface-critical-default);\n}\n\n.banner--intent-success {\n background-color: var(--s-surface-success-default);\n}\n\n.banner--intent-info {\n background-color: var(--s-surface-info-default);\n}\n\n.banner--intent-warning {\n background-color: var(--s-surface-warning-default);\n\n & .banner__icon {\n color: var(--s-icon-strong);\n }\n\n & .banner__content,\n & .banner__action-button,\n & .banner__dismiss-button {\n color: var(--s-text-default);\n }\n}\n\n.banner--has-icon {\n & .banner__content {\n @media (--from-mobile) {\n padding-top: var(--s-space-2);\n }\n }\n}\n\n.banner__icon {\n display: none;\n margin-right: var(--s-space-8);\n color: var(--s-icon-on-status);\n\n @media (--from-mobile) {\n display: inline-flex;\n }\n}\n\n.banner__content {\n min-height: 1.5rem;\n margin-right: var(--s-space-12);\n flex-grow: 1;\n line-height: var(--s-line-height-base);\n}\n\n.banner__controls {\n display: inline-flex;\n margin-left: var(--s-space-16);\n align-items: center;\n gap: var(--s-space-16);\n line-height: var(--s-line-height-base);\n\n @media (--from-tablet) {\n gap: var(--s-space-24);\n }\n}\n\n.banner__action-button,\n.banner__dismiss-button {\n display: inline-flex;\n overflow: hidden;\n max-width: 7rem;\n height: 1.5rem;\n padding: 0;\n flex-shrink: 0;\n align-items: center;\n border: none;\n background-color: transparent;\n font: inherit;\n font-weight: var(--s-font-weight-semibold);\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: pointer;\n\n &:focus {\n outline-color: var(--s-focus-default);\n }\n\n @media (--from-tablet) {\n max-width: 12rem;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipBannerAriaRole = \"alert\" | \"status\";\n\nexport type FlipBannerIntent =\n | \"default\"\n | \"critical\"\n | \"success\"\n | \"warning\"\n | \"info\";\n\nconst flipBannerIconMapping: { [key in FlipBannerIntent]: string } = {\n default: undefined,\n critical: \"<flip-icon-error></flip-icon-error>\",\n success: \"<flip-icon-check-circle></flip-icon-check-circle>\",\n warning: \"<flip-icon-warning></flip-icon-warning>\",\n info: \"<flip-icon-info></flip-icon-info>\",\n};\n\n@Component({\n shadow: true,\n styleUrl: \"flip-banner.css\",\n tag: \"flip-banner\",\n})\nexport class FlipBanner {\n @Element() element: HTMLElement;\n\n @Prop() actionLabel?: string;\n @Prop() content!: string;\n @Prop() dismissable?: boolean = false;\n @Prop() dismissLabel?: string = \"Dismiss\";\n @Prop() importance?: FlipBannerAriaRole = \"status\";\n @Prop() intent?: FlipBannerIntent = \"default\";\n @Prop() showIcon?: boolean = false;\n\n @Event() action?: EventEmitter<MouseEvent>;\n @Event() dismiss?: EventEmitter<MouseEvent>;\n\n onAction = (event: MouseEvent) => {\n this.action.emit(event);\n };\n\n onDismiss = (event: MouseEvent) => {\n this.dismiss.emit(event);\n };\n\n render() {\n const icon = flipBannerIconMapping[this.intent];\n const showControls = Boolean(this.actionLabel) || this.dismissable;\n const showIcon = this.showIcon && Boolean(icon);\n\n const className = classnames(\"banner\", `banner--intent-${this.intent}`, {\n \"banner--has-icon\": showIcon,\n });\n\n return (\n <Host>\n <div\n aria-describedby=\"content\"\n class={className}\n role={this.importance}\n tabIndex={0}\n >\n {showIcon && (\n <span\n aria-hidden=\"true\"\n class=\"banner__icon\"\n innerHTML={icon}\n ></span>\n )}\n <span class=\"banner__content\" id=\"content\">\n {this.content}\n </span>\n {showControls && (\n <span class=\"banner__controls\">\n {this.actionLabel && (\n <button\n class=\"banner__action-button\"\n onClick={this.onAction}\n type=\"button\"\n >\n {this.actionLabel}\n </button>\n )}\n {this.dismissable && (\n <button\n aria-label={this.dismissLabel}\n class=\"banner__dismiss-button\"\n onClick={this.onDismiss}\n type=\"button\"\n >\n <flip-icon-close></flip-icon-close>\n </button>\n )}\n </span>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-button-group.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
+const index = require('./index-72831c5f.js');
 const flipButtonGroupCss = ":host{display:block}:host *{box-sizing:border-box}";
@@ -22,3 +22,5 @@ const FlipButtonGroup = class {
 FlipButtonGroup.style = flipButtonGroupCss;
 exports.flip_button_group = FlipButtonGroup;
+//# sourceMappingURL=flip-button-group.cjs.entry.js.map

package/dist/cjs/flip-button-group.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-button-group.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,oDAAoD;;MCUlE,eAAe;EAL5B;;IAMU,gBAAW,GAA+B,YAAY,CAAC;GA6BhE;EAzBC,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,wBACE,KAAK,EACH,IAAI,CAAC,WAAW,KAAK,UAAU,IAAI,IAAI,CAAC,OAAO;UAC3C,SAAS;UACT,OAAO,EAEb,KAAK,EAAC,cAAc,EACpB,OAAO,EACL,IAAI,CAAC,WAAW,KAAK,YAAY,IAAI,IAAI,CAAC,OAAO;UAC7C,SAAS;UACT,OAAO,EAEb,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,GAAG,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,IAEfA,qBAAa,CACF,CACR,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/flip-button-group/flip-button-group.css?tag=flip-button-group&encapsulation=shadow","./src/components/flip-button-group/flip-button-group.tsx"],"sourcesContent":[":host {\n display: block;\n\n & * {\n box-sizing: border-box;\n }\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport { FlipStackOrientation } from \"../flip-stack/flip-stack\";\n\nexport type FlipButtonGroupOrientation = FlipStackOrientation;\n\n@Component({\n shadow: true,\n styleUrl: \"flip-button-group.css\",\n tag: \"flip-button-group\",\n})\nexport class FlipButtonGroup {\n @Prop() orientation: FlipButtonGroupOrientation = \"horizontal\";\n @Prop() stretch: boolean;\n @Prop() wrap: boolean;\n\n render() {\n return (\n <Host>\n <flip-stack\n align={\n this.orientation === \"vertical\" && this.stretch\n ? \"stretch\"\n : \"start\"\n }\n class=\"button-group\"\n justify={\n this.orientation === \"horizontal\" && this.stretch\n ? \"stretch\"\n : \"start\"\n }\n orientation={this.orientation}\n role=\"group\"\n spacing=\"8\"\n wrap={this.wrap}\n >\n <slot></slot>\n </flip-stack>\n </Host>\n );\n }\n}\n"],"version":3}