@ilo-org/twig 0.17.0 → 0.18.0

package/dist/components/toggle/toggle.wingsuit.yml

@@ -0,0 +1,95 @@
+toggle:
+  namespace: Components/Forms
+  use: "@components/toggle/toggle.twig"
+  label: Toggle
+  description: The toggle component provides users with a switch they can use to
+    turn a single option on or off or alternate between two different
+    states.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: Accept cookies
+    tooltip:
+      type: string
+      label: Tooltip
+      description: The tooltip for the form element.
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+    id:
+      type: text
+      label: ID
+      description: The ID of the text input.
+    name:
+      type: text
+      label: Name
+      description: The name of the text input.
+    class:
+      type: text
+      label: Class
+      description: The class of the text input.
+      preview: textinput
+      default: ""
+  settings:
+    labelPlacement:
+      type: select
+      label: Label Placement
+      description: The placement of the label for the form element.
+      preview: end
+      options:
+        start: start
+        end: end
+        top: top
+        bottom: bottom
+    labelSize:
+      type: select
+      label: Label Size
+      description: The size of the label for the form element.
+      preview: small
+      options:
+        small: small
+        medium: medium
+        large: large
+    defaultchecked:
+      type: boolean
+      label: Default Checked
+      description: The default checked state of the text input.
+      preview: false
+      default: false
+    checked:
+      type: boolean
+      label: Checked
+      description: The checked state of the text input.
+      preview: false
+      default: false
+    disabled:
+      type: boolean
+      label: Disabled
+      description: The disabled state of the text input.
+      preview: false
+      default: false
+    required:
+      type: boolean
+      label: Required
+      description: The required state of the text input.
+      preview: false
+      default: false
+    error:
+      type: boolean
+      label: Error
+      description: Adds an error state to the form control.
+      preview: false
+      default: false
+    size:
+      type: select
+      label: Size
+      description: The size of the toggle.
+      preview: medium
+      options:
+        small: small
+        medium: medium
+        large: large

package/dist/components/tooltip/tooltip.behavior.js

@@ -0,0 +1 @@
+!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";function e(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function t(t,n){for(var r=0;r<n.length;r++){var o=n[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,e(o.key),o)}}var n="top",r="bottom",o="right",i="left",a="auto",s=[n,r,o,i],f="start",c="end",u="clippingParents",l="viewport",p="popper",d="reference",h=s.reduce((function(e,t){return e.concat([t+"-"+f,t+"-"+c])}),[]),m=[].concat(s,[a]).reduce((function(e,t){return e.concat([t,t+"-"+f,t+"-"+c])}),[]),v=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function y(e){return e?(e.nodeName||"").toLowerCase():null}function g(e){if(null==e)return window;if("[object Window]"!==e.toString()){var t=e.ownerDocument;return t&&t.defaultView||window}return e}function b(e){return e instanceof g(e).Element||e instanceof Element}function x(e){return e instanceof g(e).HTMLElement||e instanceof HTMLElement}function w(e){return"undefined"!=typeof ShadowRoot&&(e instanceof g(e).ShadowRoot||e instanceof ShadowRoot)}var O={name:"applyStyles",enabled:!0,phase:"write",fn:function(e){var t=e.state;Object.keys(t.elements).forEach((function(e){var n=t.styles[e]||{},r=t.attributes[e]||{},o=t.elements[e];x(o)&&y(o)&&(Object.assign(o.style,n),Object.keys(r).forEach((function(e){var t=r[e];!1===t?o.removeAttribute(e):o.setAttribute(e,!0===t?"":t)})))}))},effect:function(e){var t=e.state,n={popper:{position:t.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(t.elements.popper.style,n.popper),t.styles=n,t.elements.arrow&&Object.assign(t.elements.arrow.style,n.arrow),function(){Object.keys(t.elements).forEach((function(e){var r=t.elements[e],o=t.attributes[e]||{},i=Object.keys(t.styles.hasOwnProperty(e)?t.styles[e]:n[e]).reduce((function(e,t){return e[t]="",e}),{});x(r)&&y(r)&&(Object.assign(r.style,i),Object.keys(o).forEach((function(e){r.removeAttribute(e)})))}))}},requires:["computeStyles"]};function j(e){return e.split("-")[0]}var E=Math.max,A=Math.min,M=Math.round;function D(){var e=navigator.userAgentData;return null!=e&&e.brands&&Array.isArray(e.brands)?e.brands.map((function(e){return e.brand+"/"+e.version})).join(" "):navigator.userAgent}function k(){return!/^((?!chrome|android).)*safari/i.test(D())}function L(e,t,n){void 0===t&&(t=!1),void 0===n&&(n=!1);var r=e.getBoundingClientRect(),o=1,i=1;t&&x(e)&&(o=e.offsetWidth>0&&M(r.width)/e.offsetWidth||1,i=e.offsetHeight>0&&M(r.height)/e.offsetHeight||1);var a=(b(e)?g(e):window).visualViewport,s=!k()&&n,f=(r.left+(s&&a?a.offsetLeft:0))/o,c=(r.top+(s&&a?a.offsetTop:0))/i,u=r.width/o,l=r.height/i;return{width:u,height:l,top:c,right:f+u,bottom:c+l,left:f,x:f,y:c}}function P(e){var t=L(e),n=e.offsetWidth,r=e.offsetHeight;return Math.abs(t.width-n)<=1&&(n=t.width),Math.abs(t.height-r)<=1&&(r=t.height),{x:e.offsetLeft,y:e.offsetTop,width:n,height:r}}function W(e,t){var n=t.getRootNode&&t.getRootNode();if(e.contains(t))return!0;if(n&&w(n)){var r=t;do{if(r&&e.isSameNode(r))return!0;r=r.parentNode||r.host}while(r)}return!1}function T(e){return g(e).getComputedStyle(e)}function B(e){return["table","td","th"].indexOf(y(e))>=0}function H(e){return((b(e)?e.ownerDocument:e.document)||window.document).documentElement}function R(e){return"html"===y(e)?e:e.assignedSlot||e.parentNode||(w(e)?e.host:null)||H(e)}function S(e){return x(e)&&"fixed"!==T(e).position?e.offsetParent:null}function C(e){for(var t=g(e),n=S(e);n&&B(n)&&"static"===T(n).position;)n=S(n);return n&&("html"===y(n)||"body"===y(n)&&"static"===T(n).position)?t:n||function(e){var t=/firefox/i.test(D());if(/Trident/i.test(D())&&x(e)&&"fixed"===T(e).position)return null;var n=R(e);for(w(n)&&(n=n.host);x(n)&&["html","body"].indexOf(y(n))<0;){var r=T(n);if("none"!==r.transform||"none"!==r.perspective||"paint"===r.contain||-1!==["transform","perspective"].indexOf(r.willChange)||t&&"filter"===r.willChange||t&&r.filter&&"none"!==r.filter)return n;n=n.parentNode}return null}(e)||t}function q(e){return["top","bottom"].indexOf(e)>=0?"x":"y"}function V(e,t,n){return E(e,A(t,n))}function N(e){return Object.assign({},{top:0,right:0,bottom:0,left:0},e)}function F(e,t){return t.reduce((function(t,n){return t[n]=e,t}),{})}var I={name:"arrow",enabled:!0,phase:"main",fn:function(e){var t,a=e.state,f=e.name,c=e.options,u=a.elements.arrow,l=a.modifiersData.popperOffsets,p=j(a.placement),d=q(p),h=[i,o].indexOf(p)>=0?"height":"width";if(u&&l){var m=function(e,t){return N("number"!=typeof(e="function"==typeof e?e(Object.assign({},t.rects,{placement:t.placement})):e)?e:F(e,s))}(c.padding,a),v=P(u),y="y"===d?n:i,g="y"===d?r:o,b=a.rects.reference[h]+a.rects.reference[d]-l[d]-a.rects.popper[h],x=l[d]-a.rects.reference[d],w=C(u),O=w?"y"===d?w.clientHeight||0:w.clientWidth||0:0,E=b/2-x/2,A=m[y],M=O-v[h]-m[g],D=O/2-v[h]/2+E,k=V(A,D,M),L=d;a.modifiersData[f]=((t={})[L]=k,t.centerOffset=k-D,t)}},effect:function(e){var t=e.state,n=e.options.element,r=void 0===n?"[data-popper-arrow]":n;null!=r&&("string"!=typeof r||(r=t.elements.popper.querySelector(r)))&&W(t.elements.popper,r)&&(t.elements.arrow=r)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]};function U(e){return e.split("-")[1]}var z={top:"auto",right:"auto",bottom:"auto",left:"auto"};function _(e){var t,a=e.popper,s=e.popperRect,f=e.placement,u=e.variation,l=e.offsets,p=e.position,d=e.gpuAcceleration,h=e.adaptive,m=e.roundOffsets,v=e.isFixed,y=l.x,b=void 0===y?0:y,x=l.y,w=void 0===x?0:x,O="function"==typeof m?m({x:b,y:w}):{x:b,y:w};b=O.x,w=O.y;var j=l.hasOwnProperty("x"),E=l.hasOwnProperty("y"),A=i,D=n,k=window;if(h){var L=C(a),P="clientHeight",W="clientWidth";if(L===g(a)&&"static"!==T(L=H(a)).position&&"absolute"===p&&(P="scrollHeight",W="scrollWidth"),f===n||(f===i||f===o)&&u===c)D=r,w-=(v&&L===k&&k.visualViewport?k.visualViewport.height:L[P])-s.height,w*=d?1:-1;if(f===i||(f===n||f===r)&&u===c)A=o,b-=(v&&L===k&&k.visualViewport?k.visualViewport.width:L[W])-s.width,b*=d?1:-1}var B,R=Object.assign({position:p},h&&z),S=!0===m?function(e,t){var n=e.x,r=e.y,o=t.devicePixelRatio||1;return{x:M(n*o)/o||0,y:M(r*o)/o||0}}({x:b,y:w},g(a)):{x:b,y:w};return b=S.x,w=S.y,d?Object.assign({},R,((B={})[D]=E?"0":"",B[A]=j?"0":"",B.transform=(k.devicePixelRatio||1)<=1?"translate("+b+"px, "+w+"px)":"translate3d("+b+"px, "+w+"px, 0)",B)):Object.assign({},R,((t={})[D]=E?w+"px":"",t[A]=j?b+"px":"",t.transform="",t))}var X={passive:!0};var Y={left:"right",right:"left",bottom:"top",top:"bottom"};function G(e){return e.replace(/left|right|bottom|top/g,(function(e){return Y[e]}))}var J={start:"end",end:"start"};function K(e){return e.replace(/start|end/g,(function(e){return J[e]}))}function Q(e){var t=g(e);return{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function Z(e){return L(H(e)).left+Q(e).scrollLeft}function $(e){var t=T(e),n=t.overflow,r=t.overflowX,o=t.overflowY;return/auto|scroll|overlay|hidden/.test(n+o+r)}function ee(e){return["html","body","#document"].indexOf(y(e))>=0?e.ownerDocument.body:x(e)&&$(e)?e:ee(R(e))}function te(e,t){var n;void 0===t&&(t=[]);var r=ee(e),o=r===(null==(n=e.ownerDocument)?void 0:n.body),i=g(r),a=o?[i].concat(i.visualViewport||[],$(r)?r:[]):r,s=t.concat(a);return o?s:s.concat(te(R(a)))}function ne(e){return Object.assign({},e,{left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height})}function re(e,t,n){return t===l?ne(function(e,t){var n=g(e),r=H(e),o=n.visualViewport,i=r.clientWidth,a=r.clientHeight,s=0,f=0;if(o){i=o.width,a=o.height;var c=k();(c||!c&&"fixed"===t)&&(s=o.offsetLeft,f=o.offsetTop)}return{width:i,height:a,x:s+Z(e),y:f}}(e,n)):b(t)?function(e,t){var n=L(e,!1,"fixed"===t);return n.top=n.top+e.clientTop,n.left=n.left+e.clientLeft,n.bottom=n.top+e.clientHeight,n.right=n.left+e.clientWidth,n.width=e.clientWidth,n.height=e.clientHeight,n.x=n.left,n.y=n.top,n}(t,n):ne(function(e){var t,n=H(e),r=Q(e),o=null==(t=e.ownerDocument)?void 0:t.body,i=E(n.scrollWidth,n.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),a=E(n.scrollHeight,n.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0),s=-r.scrollLeft+Z(e),f=-r.scrollTop;return"rtl"===T(o||n).direction&&(s+=E(n.clientWidth,o?o.clientWidth:0)-i),{width:i,height:a,x:s,y:f}}(H(e)))}function oe(e,t,n,r){var o="clippingParents"===t?function(e){var t=te(R(e)),n=["absolute","fixed"].indexOf(T(e).position)>=0&&x(e)?C(e):e;return b(n)?t.filter((function(e){return b(e)&&W(e,n)&&"body"!==y(e)})):[]}(e):[].concat(t),i=[].concat(o,[n]),a=i[0],s=i.reduce((function(t,n){var o=re(e,n,r);return t.top=E(o.top,t.top),t.right=A(o.right,t.right),t.bottom=A(o.bottom,t.bottom),t.left=E(o.left,t.left),t}),re(e,a,r));return s.width=s.right-s.left,s.height=s.bottom-s.top,s.x=s.left,s.y=s.top,s}function ie(e){var t,a=e.reference,s=e.element,u=e.placement,l=u?j(u):null,p=u?U(u):null,d=a.x+a.width/2-s.width/2,h=a.y+a.height/2-s.height/2;switch(l){case n:t={x:d,y:a.y-s.height};break;case r:t={x:d,y:a.y+a.height};break;case o:t={x:a.x+a.width,y:h};break;case i:t={x:a.x-s.width,y:h};break;default:t={x:a.x,y:a.y}}var m=l?q(l):null;if(null!=m){var v="y"===m?"height":"width";switch(p){case f:t[m]=t[m]-(a[v]/2-s[v]/2);break;case c:t[m]=t[m]+(a[v]/2-s[v]/2)}}return t}function ae(e,t){void 0===t&&(t={});var i=t,a=i.placement,f=void 0===a?e.placement:a,c=i.strategy,h=void 0===c?e.strategy:c,m=i.boundary,v=void 0===m?u:m,y=i.rootBoundary,g=void 0===y?l:y,x=i.elementContext,w=void 0===x?p:x,O=i.altBoundary,j=void 0!==O&&O,E=i.padding,A=void 0===E?0:E,M=N("number"!=typeof A?A:F(A,s)),D=w===p?d:p,k=e.rects.popper,P=e.elements[j?D:w],W=oe(b(P)?P:P.contextElement||H(e.elements.popper),v,g,h),T=L(e.elements.reference),B=ie({reference:T,element:k,strategy:"absolute",placement:f}),R=ne(Object.assign({},k,B)),S=w===p?R:T,C={top:W.top-S.top+M.top,bottom:S.bottom-W.bottom+M.bottom,left:W.left-S.left+M.left,right:S.right-W.right+M.right},q=e.modifiersData.offset;if(w===p&&q){var V=q[f];Object.keys(C).forEach((function(e){var t=[o,r].indexOf(e)>=0?1:-1,i=[n,r].indexOf(e)>=0?"y":"x";C[e]+=V[i]*t}))}return C}function se(e,t){void 0===t&&(t={});var n=t,r=n.placement,o=n.boundary,i=n.rootBoundary,a=n.padding,f=n.flipVariations,c=n.allowedAutoPlacements,u=void 0===c?m:c,l=U(r),p=l?f?h:h.filter((function(e){return U(e)===l})):s,d=p.filter((function(e){return u.indexOf(e)>=0}));0===d.length&&(d=p);var v=d.reduce((function(t,n){return t[n]=ae(e,{placement:n,boundary:o,rootBoundary:i,padding:a})[j(n)],t}),{});return Object.keys(v).sort((function(e,t){return v[e]-v[t]}))}var fe={name:"flip",enabled:!0,phase:"main",fn:function(e){var t=e.state,s=e.options,c=e.name;if(!t.modifiersData[c]._skip){for(var u=s.mainAxis,l=void 0===u||u,p=s.altAxis,d=void 0===p||p,h=s.fallbackPlacements,m=s.padding,v=s.boundary,y=s.rootBoundary,g=s.altBoundary,b=s.flipVariations,x=void 0===b||b,w=s.allowedAutoPlacements,O=t.options.placement,E=j(O),A=h||(E===O||!x?[G(O)]:function(e){if(j(e)===a)return[];var t=G(e);return[K(e),t,K(t)]}(O)),M=[O].concat(A).reduce((function(e,n){return e.concat(j(n)===a?se(t,{placement:n,boundary:v,rootBoundary:y,padding:m,flipVariations:x,allowedAutoPlacements:w}):n)}),[]),D=t.rects.reference,k=t.rects.popper,L=new Map,P=!0,W=M[0],T=0;T<M.length;T++){var B=M[T],H=j(B),R=U(B)===f,S=[n,r].indexOf(H)>=0,C=S?"width":"height",q=ae(t,{placement:B,boundary:v,rootBoundary:y,altBoundary:g,padding:m}),V=S?R?o:i:R?r:n;D[C]>k[C]&&(V=G(V));var N=G(V),F=[];if(l&&F.push(q[H]<=0),d&&F.push(q[V]<=0,q[N]<=0),F.every((function(e){return e}))){W=B,P=!1;break}L.set(B,F)}if(P)for(var I=function(e){var t=M.find((function(t){var n=L.get(t);if(n)return n.slice(0,e).every((function(e){return e}))}));if(t)return W=t,"break"},z=x?3:1;z>0;z--){if("break"===I(z))break}t.placement!==W&&(t.modifiersData[c]._skip=!0,t.placement=W,t.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}};function ce(e,t,n){return void 0===n&&(n={x:0,y:0}),{top:e.top-t.height-n.y,right:e.right-t.width+n.x,bottom:e.bottom-t.height+n.y,left:e.left-t.width-n.x}}function ue(e){return[n,o,r,i].some((function(t){return e[t]>=0}))}var le={name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(e){var t=e.state,r=e.options,a=e.name,s=r.offset,f=void 0===s?[0,0]:s,c=m.reduce((function(e,r){return e[r]=function(e,t,r){var a=j(e),s=[i,n].indexOf(a)>=0?-1:1,f="function"==typeof r?r(Object.assign({},t,{placement:e})):r,c=f[0],u=f[1];return c=c||0,u=(u||0)*s,[i,o].indexOf(a)>=0?{x:u,y:c}:{x:c,y:u}}(r,t.rects,f),e}),{}),u=c[t.placement],l=u.x,p=u.y;null!=t.modifiersData.popperOffsets&&(t.modifiersData.popperOffsets.x+=l,t.modifiersData.popperOffsets.y+=p),t.modifiersData[a]=c}};var pe={name:"preventOverflow",enabled:!0,phase:"main",fn:function(e){var t=e.state,a=e.options,s=e.name,c=a.mainAxis,u=void 0===c||c,l=a.altAxis,p=void 0!==l&&l,d=a.boundary,h=a.rootBoundary,m=a.altBoundary,v=a.padding,y=a.tether,g=void 0===y||y,b=a.tetherOffset,x=void 0===b?0:b,w=ae(t,{boundary:d,rootBoundary:h,padding:v,altBoundary:m}),O=j(t.placement),M=U(t.placement),D=!M,k=q(O),L="x"===k?"y":"x",W=t.modifiersData.popperOffsets,T=t.rects.reference,B=t.rects.popper,H="function"==typeof x?x(Object.assign({},t.rects,{placement:t.placement})):x,R="number"==typeof H?{mainAxis:H,altAxis:H}:Object.assign({mainAxis:0,altAxis:0},H),S=t.modifiersData.offset?t.modifiersData.offset[t.placement]:null,N={x:0,y:0};if(W){if(u){var F,I="y"===k?n:i,z="y"===k?r:o,_="y"===k?"height":"width",X=W[k],Y=X+w[I],G=X-w[z],J=g?-B[_]/2:0,K=M===f?T[_]:B[_],Q=M===f?-B[_]:-T[_],Z=t.elements.arrow,$=g&&Z?P(Z):{width:0,height:0},ee=t.modifiersData["arrow#persistent"]?t.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},te=ee[I],ne=ee[z],re=V(0,T[_],$[_]),oe=D?T[_]/2-J-re-te-R.mainAxis:K-re-te-R.mainAxis,ie=D?-T[_]/2+J+re+ne+R.mainAxis:Q+re+ne+R.mainAxis,se=t.elements.arrow&&C(t.elements.arrow),fe=se?"y"===k?se.clientTop||0:se.clientLeft||0:0,ce=null!=(F=null==S?void 0:S[k])?F:0,ue=X+ie-ce,le=V(g?A(Y,X+oe-ce-fe):Y,X,g?E(G,ue):G);W[k]=le,N[k]=le-X}if(p){var pe,de="x"===k?n:i,he="x"===k?r:o,me=W[L],ve="y"===L?"height":"width",ye=me+w[de],ge=me-w[he],be=-1!==[n,i].indexOf(O),xe=null!=(pe=null==S?void 0:S[L])?pe:0,we=be?ye:me-T[ve]-B[ve]-xe+R.altAxis,Oe=be?me+T[ve]+B[ve]-xe-R.altAxis:ge,je=g&&be?function(e,t,n){var r=V(e,t,n);return r>n?n:r}(we,me,Oe):V(g?we:ye,me,g?Oe:ge);W[L]=je,N[L]=je-me}t.modifiersData[s]=N}},requiresIfExists:["offset"]};function de(e,t,n){void 0===n&&(n=!1);var r,o,i=x(t),a=x(t)&&function(e){var t=e.getBoundingClientRect(),n=M(t.width)/e.offsetWidth||1,r=M(t.height)/e.offsetHeight||1;return 1!==n||1!==r}(t),s=H(t),f=L(e,a,n),c={scrollLeft:0,scrollTop:0},u={x:0,y:0};return(i||!i&&!n)&&(("body"!==y(t)||$(s))&&(c=(r=t)!==g(r)&&x(r)?{scrollLeft:(o=r).scrollLeft,scrollTop:o.scrollTop}:Q(r)),x(t)?((u=L(t,!0)).x+=t.clientLeft,u.y+=t.clientTop):s&&(u.x=Z(s))),{x:f.left+c.scrollLeft-u.x,y:f.top+c.scrollTop-u.y,width:f.width,height:f.height}}function he(e){var t=new Map,n=new Set,r=[];function o(e){n.add(e.name),[].concat(e.requires||[],e.requiresIfExists||[]).forEach((function(e){if(!n.has(e)){var r=t.get(e);r&&o(r)}})),r.push(e)}return e.forEach((function(e){t.set(e.name,e)})),e.forEach((function(e){n.has(e.name)||o(e)})),r}var me={placement:"bottom",modifiers:[],strategy:"absolute"};function ve(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return!t.some((function(e){return!(e&&"function"==typeof e.getBoundingClientRect)}))}function ye(e){void 0===e&&(e={});var t=e,n=t.defaultModifiers,r=void 0===n?[]:n,o=t.defaultOptions,i=void 0===o?me:o;return function(e,t,n){void 0===n&&(n=i);var o,a,s={placement:"bottom",orderedModifiers:[],options:Object.assign({},me,i),modifiersData:{},elements:{reference:e,popper:t},attributes:{},styles:{}},f=[],c=!1,u={state:s,setOptions:function(n){var o="function"==typeof n?n(s.options):n;l(),s.options=Object.assign({},i,s.options,o),s.scrollParents={reference:b(e)?te(e):e.contextElement?te(e.contextElement):[],popper:te(t)};var a,c,p=function(e){var t=he(e);return v.reduce((function(e,n){return e.concat(t.filter((function(e){return e.phase===n})))}),[])}((a=[].concat(r,s.options.modifiers),c=a.reduce((function(e,t){var n=e[t.name];return e[t.name]=n?Object.assign({},n,t,{options:Object.assign({},n.options,t.options),data:Object.assign({},n.data,t.data)}):t,e}),{}),Object.keys(c).map((function(e){return c[e]}))));return s.orderedModifiers=p.filter((function(e){return e.enabled})),s.orderedModifiers.forEach((function(e){var t=e.name,n=e.options,r=void 0===n?{}:n,o=e.effect;if("function"==typeof o){var i=o({state:s,name:t,instance:u,options:r}),a=function(){};f.push(i||a)}})),u.update()},forceUpdate:function(){if(!c){var e=s.elements,t=e.reference,n=e.popper;if(ve(t,n)){s.rects={reference:de(t,C(n),"fixed"===s.options.strategy),popper:P(n)},s.reset=!1,s.placement=s.options.placement,s.orderedModifiers.forEach((function(e){return s.modifiersData[e.name]=Object.assign({},e.data)}));for(var r=0;r<s.orderedModifiers.length;r++)if(!0!==s.reset){var o=s.orderedModifiers[r],i=o.fn,a=o.options,f=void 0===a?{}:a,l=o.name;"function"==typeof i&&(s=i({state:s,options:f,name:l,instance:u})||s)}else s.reset=!1,r=-1}}},update:(o=function(){return new Promise((function(e){u.forceUpdate(),e(s)}))},function(){return a||(a=new Promise((function(e){Promise.resolve().then((function(){a=void 0,e(o())}))}))),a}),destroy:function(){l(),c=!0}};if(!ve(e,t))return u;function l(){f.forEach((function(e){return e()})),f=[]}return u.setOptions(n).then((function(e){!c&&n.onFirstUpdate&&n.onFirstUpdate(e)})),u}}var ge=ye({defaultModifiers:[{name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(e){var t=e.state,n=e.instance,r=e.options,o=r.scroll,i=void 0===o||o,a=r.resize,s=void 0===a||a,f=g(t.elements.popper),c=[].concat(t.scrollParents.reference,t.scrollParents.popper);return i&&c.forEach((function(e){e.addEventListener("scroll",n.update,X)})),s&&f.addEventListener("resize",n.update,X),function(){i&&c.forEach((function(e){e.removeEventListener("scroll",n.update,X)})),s&&f.removeEventListener("resize",n.update,X)}},data:{}},{name:"popperOffsets",enabled:!0,phase:"read",fn:function(e){var t=e.state,n=e.name;t.modifiersData[n]=ie({reference:t.rects.reference,element:t.rects.popper,strategy:"absolute",placement:t.placement})},data:{}},{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(e){var t=e.state,n=e.options,r=n.gpuAcceleration,o=void 0===r||r,i=n.adaptive,a=void 0===i||i,s=n.roundOffsets,f=void 0===s||s,c={placement:j(t.placement),variation:U(t.placement),popper:t.elements.popper,popperRect:t.rects.popper,gpuAcceleration:o,isFixed:"fixed"===t.options.strategy};null!=t.modifiersData.popperOffsets&&(t.styles.popper=Object.assign({},t.styles.popper,_(Object.assign({},c,{offsets:t.modifiersData.popperOffsets,position:t.options.strategy,adaptive:a,roundOffsets:f})))),null!=t.modifiersData.arrow&&(t.styles.arrow=Object.assign({},t.styles.arrow,_(Object.assign({},c,{offsets:t.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:f})))),t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-placement":t.placement})},data:{}},O,le,fe,pe,I,{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(e){var t=e.state,n=e.name,r=t.rects.reference,o=t.rects.popper,i=t.modifiersData.preventOverflow,a=ae(t,{elementContext:"reference"}),s=ae(t,{altBoundary:!0}),f=ce(a,r),c=ce(s,o,i),u=ue(f),l=ue(c);t.modifiersData[n]={referenceClippingOffsets:f,popperEscapeOffsets:c,isReferenceHidden:u,hasPopperEscaped:l},t.attributes.popper=Object.assign({},t.attributes.popper,{"data-popper-reference-hidden":u,"data-popper-escaped":l})}}]}),be=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.element=t,this.init()},(n=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable(),this}},{key:"cacheDomReferences",value:function(){return this.prefix=this.element.getAttribute("data-prefix"),this.tooltip=this.element.querySelector(".".concat(this.prefix,"--tooltip")),this.arrow=this.element.querySelector(".".concat(this.prefix,"--tooltip--arrow")),this.alignment=this.arrow.getAttribute("data-alignment"),this.placement=this.tooltip.getAttribute("data-placement"),this}},{key:"setupHandlers",value:function(){return this.onMouseOver=this.handleOnMouseOver.bind(this),this.onFocus=this.handleOnMouseOver.bind(this),this.onMouseOut=this.handleOnMouseOut.bind(this),this.onBlur=this.handleOnMouseOut.bind(this),this}},{key:"enable",value:function(){return this.element.addEventListener("mouseover",this.onMouseOver),this.element.addEventListener("focus",this.onMouseOver),this.element.addEventListener("mouseout",this.onMouseOut),this.element.addEventListener("blur",this.onMouseOut),this}},{key:"handleOnMouseOver",value:function(e){var t=e.currentTarget;if(null!=t){var n=t.getBoundingClientRect();this.tooltip.classList.add("".concat(this.prefix,"--tooltip--visible")),this.tooltip.classList.add("".concat(this.prefix,"--tooltip--fade")),this.postMouseOver(n)}return this}},{key:"handleOnMouseOut",value:function(){var e=this;return setTimeout((function(){e.tooltip.classList.remove("".concat(e.prefix,"--tooltip--fade")),e.tooltip.classList.remove("".concat(e.prefix,"--tooltip--visible"))}),200),this}},{key:"postMouseOver",value:function(e){var t=this.tooltip;return this.setMaxWidthAndClass(this.tooltip),null!=t&&(this.popper||(this.popper=ge(this.element,this.tooltip,{placement:"top",modifiers:["flip","preventOverflow",{name:"offset",options:{offset:[0,12]}}]})),this.popper.update()),this}},{key:"setMaxWidthAndClass",value:function(e){(e.textContent||e.innerText).trim().length>50&&this.tooltip.classList.add("".concat(this.prefix,"--tooltip--long"))}}])&&t(e.prototype,n),r&&t(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,n,r}();Drupal.behaviors.tooltip={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="Tooltip"]'),(function(e){e.dataset.jsProcessed||(new be(e),e.dataset.jsProcessed=!0)}))}}}));

package/dist/components/tooltip/tooltip.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--tooltip{font-size:14.93px;letter-spacing:normal;line-height:20.3px;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:400;background:#fff;border:none;border-radius:.1071811361rem;display:inline-block;filter:drop-shadow(0 .8px 1.6px rgba(30,45,190,.038)) drop-shadow(0 4px 8px rgba(30,45,190,.054)) drop-shadow(0 10px 20px rgba(30,45,190,.08)) drop-shadow(0 -4px 16px rgba(30,45,190,.054));color:#2d2d2d;opacity:0;padding:.4287245445rem .857449089rem .6430868167rem;position:absolute;visibility:hidden;width:max-content;max-width:9.6463022508rem}@media screen and (min-width:610px){.ilo--tooltip--long{max-width:21.436227224rem}}.ilo--tooltip--fade{opacity:1}.ilo--tooltip--visible{visibility:visible;z-index:2;opacity:1}.ilo--tooltip--arrow,.ilo--tooltip--arrow:before{position:absolute;visibility:hidden;width:10px;height:10px;background:inherit}.ilo--tooltip--arrow:before{visibility:visible;content:"";transform:rotate(45deg)}.ilo--tooltip[data-popper-placement^=top]>.ilo--tooltip--arrow{bottom:-4px}.ilo--tooltip[data-popper-placement^=bottom]>.ilo--tooltip--arrow{top:-4px}.ilo--tooltip[data-popper-placement^=left]>.ilo--tooltip--arrow{right:-4px}.ilo--tooltip[data-popper-placement^=right]>.ilo--tooltip--arrow{left:-4px}.ilo--tooltip--wrapper{display:inline-block;position:relative;cursor:pointer}.ilo--tooltip--wrapper__icon{background-repeat:no-repeat;background-size:cover;height:.857449089rem;min-width:.857449089rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23230050' d='M8 0C6.4 0 4.9.5 3.6 1.3c-1.4.9-2.4 2.2-3 3.6C0 6.4-.2 8 .2 9.6c.3 1.6 1.1 3 2.2 4.1 1.1 1.1 2.5 1.9 4.1 2.2s3.2.2 4.6-.5c1.5-.6 2.7-1.6 3.6-2.9.8-1.4 1.3-2.9 1.3-4.5 0-2.1-.8-4.2-2.3-5.7C12.2.8 10.1 0 8 0zm0 14c-1.2 0-2.3-.4-3.3-1-1-.7-1.8-1.6-2.2-2.7C2 9.2 1.9 8 2.1 6.8c.2-1.2.8-2.2 1.6-3.1.8-.8 1.9-1.4 3.1-1.6 1.2-.2 2.4-.1 3.5.4s2 1.2 2.7 2.2c.7 1 1 2.1 1 3.3 0 1.6-.6 3.1-1.8 4.2C11.1 13.4 9.6 14 8 14z'/%3E%3Cpath fill='%23230050' d='M9 7H7v5h2V7zM8 6c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z'/%3E%3C/svg%3E")}.ilo--tooltip--wrapper__icon.ilo--tooltip--wrapper__icon__theme__dark{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23EDF0F2' d='M8 0C6.4 0 4.9.5 3.6 1.3c-1.4.9-2.4 2.2-3 3.6C0 6.4-.2 8 .2 9.6c.3 1.6 1.1 3 2.2 4.1 1.1 1.1 2.5 1.9 4.1 2.2s3.2.2 4.6-.5c1.5-.6 2.7-1.6 3.6-2.9.8-1.4 1.3-2.9 1.3-4.5 0-2.1-.8-4.2-2.3-5.7C12.2.8 10.1 0 8 0zm0 14c-1.2 0-2.3-.4-3.3-1-1-.7-1.8-1.6-2.2-2.7C2 9.2 1.9 8 2.1 6.8c.2-1.2.8-2.2 1.6-3.1.8-.8 1.9-1.4 3.1-1.6 1.2-.2 2.4-.1 3.5.4s2 1.2 2.7 2.2c.7 1 1 2.1 1 3.3 0 1.6-.6 3.1-1.8 4.2C11.1 13.4 9.6 14 8 14z'/%3E%3Cpath fill='%23EDF0F2' d='M9 7H7v5h2V7zM8 6c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z'/%3E%3C/svg%3E")}.ilo--tooltip--dark{background:#2d2d2d;color:#edf0f2}.ilo--tooltip--dark.ilo--tooltip--arrow{border-bottom-color:#2d2d2d;border-top-color:#2d2d2d;border-left-color:#2d2d2d;border-right-color:#2d2d2d}.docs-story div[height]{min-height:150px}

package/dist/components/tooltip/tooltip.twig

@@ -0,0 +1,14 @@
+{# tooltip.twig #}
+
+{% set icontheme = icontheme|default("light") %}
+{% set theme = theme|default("dark") %}
+
+<div class="ilo--tooltip--wrapper {% if icon and icon != "false" %} ilo--tooltip--wrapper__icon ilo--tooltip--wrapper__icon__theme__{{icontheme}} {% endif %}" role="status" aria-live="polite" aria-relevant="additions" data-loadcomponent="Tooltip" data-prefix="ilo">
+	{% if not icon or icon == "false" %}
+		{{ children }}
+	{% endif %}
+	<span data-id={{tooltipId}} id="tooltip" role="tooltip" class="ilo--tooltip ilo--tooltip--{{theme}}" data-alignment="left" >
+		<span data-popper-arrow class="ilo--tooltip--arrow ilo--tooltip--arrow--placement-negative" data-placement="negative" role="presentation"></span>
+		{{label}}
+	</span>
+</div>

package/dist/components/tooltip/tooltip.wingsuit.yml

@@ -0,0 +1,53 @@
+tooltip:
+  namespace: Components/Feedback
+  use: "@components/tooltip/tooltip.twig"
+  label: Tooltip
+  description: A component for displaying a tooltip
+  fields:
+    label:
+      type: string
+      label: label
+      description: label shown on the tooltip
+      required: true
+      preview: "Tooltip text"
+    tooltipId:
+      type: string
+      label: tooltipId
+      description: id for the tooltip. This is often needed for accessibility purposes, for example when you need to provide an `id` to an `aria-describedby` attribute.
+      required: true
+      preview: "tooltip-id"
+    children:
+      type: string
+      label: children
+      description: html to pass in to be wrapped by the tooltip
+      required: false
+      preview: "<a href='https://www.google.com/'>This is testing for the tooltip</a>"
+  settings:
+    icon:
+      type: select
+      label: Icon
+      description: does this tooltip have the "info" icon?
+      options:
+        "true": "true"
+        "false": "false"
+      preview: "true"
+      required: true
+    icontheme:
+      type: select
+      label: Icon Theme
+      description: Use dark for dark backgrounds, light for light backgrounds
+      options:
+        light: light
+        dark: dark
+      preview: light
+      required: true
+    theme:
+      type: select
+      label: Theme
+      description: Choose the tooltip's theme
+      options:
+        light: light
+        dark: dark
+      preview: dark
+      required: true
+  visibility: storybook