\n
\n );\n }\n\n /**\n * Determine whether or not the modal should be dismissible via an 'x' button.\n *\n * @return {Boolean}\n */\n isDismissible() {\n return true;\n }\n\n /**\n * Get the class name to apply to the modal.\n *\n * @return {String}\n * @abstract\n */\n className() {\n }\n\n /**\n * Get the title of the modal dialog.\n *\n * @return {String}\n * @abstract\n */\n title() {\n }\n\n /**\n * Get the content of the modal.\n *\n * @return {VirtualElement}\n * @abstract\n */\n content() {\n }\n\n /**\n * Handle the modal form's submit event.\n *\n * @param {Event} e\n */\n onsubmit() {\n }\n\n /**\n * Focus on the first input when the modal is ready to be used.\n */\n onready() {\n this.$('form').find('input, select, textarea').first().focus().select();\n }\n\n onhide() {\n }\n\n /**\n * Hide the modal.\n */\n hide() {\n app.modal.close();\n }\n\n /**\n * Stop loading.\n */\n loaded() {\n this.loading = false;\n m.redraw();\n }\n\n /**\n * Show an alert describing an error returned from the API, and give focus to\n * the first relevant field.\n *\n * @param {RequestError} error\n */\n onerror(error) {\n this.alert = error.alert;\n\n m.redraw();\n\n if (error.status === 422 && error.response.errors) {\n this.$('form [name=' + error.response.errors[0].source.pointer.replace('/data/attributes/', '') + ']').select();\n } else {\n this.onready();\n }\n }\n}\n","import Component from '../Component';\nimport icon from '../helpers/icon';\nimport listItems from '../helpers/listItems';\n\n/**\n * The `Dropdown` component displays a button which, when clicked, shows a\n * dropdown menu beneath it.\n *\n * ### Props\n *\n * - `buttonClassName` A class name to apply to the dropdown toggle button.\n * - `menuClassName` A class name to apply to the dropdown menu.\n * - `icon` The name of an icon to show in the dropdown toggle button.\n * - `caretIcon` The name of an icon to show on the right of the button.\n * - `label` The label of the dropdown toggle button. Defaults to 'Controls'.\n * - `onhide`\n * - `onshow`\n *\n * The children will be displayed as a list inside of the dropdown menu.\n */\nexport default class Dropdown extends Component {\n static initProps(props) {\n super.initProps(props);\n\n props.className = props.className || '';\n props.buttonClassName = props.buttonClassName || '';\n props.menuClassName = props.menuClassName || '';\n props.label = props.label || '';\n props.caretIcon = typeof props.caretIcon !== 'undefined' ? props.caretIcon : 'fas fa-caret-down';\n }\n\n init() {\n this.showing = false;\n }\n\n view() {\n const items = this.props.children ? listItems(this.props.children) : [];\n\n return (\n \n {this.isDismissible() ? (\n
\n \n {Button.component({\n icon: 'fas fa-times',\n onclick: this.hide.bind(this),\n className: 'Button Button--icon Button--link'\n })}\n
\n ) : ''}\n\n \n \n {this.getButton()}\n {this.getMenu(items)}\n
\n );\n }\n\n config(isInitialized) {\n if (isInitialized) return;\n\n // When opening the dropdown menu, work out if the menu goes beyond the\n // bottom of the viewport. If it does, we will apply class to make it show\n // above the toggle button instead of below it.\n this.$().on('shown.bs.dropdown', () => {\n this.showing = true;\n\n if (this.props.onshow) {\n this.props.onshow();\n }\n\n m.redraw();\n\n const $menu = this.$('.Dropdown-menu');\n const isRight = $menu.hasClass('Dropdown-menu--right');\n\n $menu.removeClass('Dropdown-menu--top Dropdown-menu--right');\n\n $menu.toggleClass(\n 'Dropdown-menu--top',\n $menu.offset().top + $menu.height() > $(window).scrollTop() + $(window).height()\n );\n\n if ($menu.offset().top < 0) {\n $menu.removeClass('Dropdown-menu--top');\n }\n\n $menu.toggleClass(\n 'Dropdown-menu--right',\n isRight || $menu.offset().left + $menu.width() > $(window).scrollLeft() + $(window).width()\n );\n });\n\n this.$().on('hidden.bs.dropdown', () => {\n this.showing = false;\n\n if (this.props.onhide) {\n this.props.onhide();\n }\n\n m.redraw();\n });\n }\n\n /**\n * Get the template for the button.\n *\n * @return {*}\n * @protected\n */\n getButton() {\n return (\n - \n {items}\n
{m.trust(' ')}
;\n }\n\n config(isInitialized) {\n if (isInitialized) return;\n\n const options = { zIndex: 'auto', color: this.$().css('color') };\n\n switch (this.props.size) {\n case 'large':\n Object.assign(options, { lines: 10, length: 8, width: 4, radius: 8 });\n break;\n\n case 'tiny':\n Object.assign(options, { lines: 8, length: 2, width: 2, radius: 3 });\n break;\n\n default:\n Object.assign(options, { lines: 8, length: 4, width: 3, radius: 5 });\n }\n\n new Spinner(options).spin(this.element);\n }\n}\n","/**\n * The `avatar` helper displays a user's avatar.\n *\n * @param {User} user\n * @param {Object} attrs Attributes to apply to the avatar element\n * @return {Object}\n */\nexport default function avatar(user, attrs = {}) {\n attrs.className = 'Avatar ' + (attrs.className || '');\n let content = '';\n\n // If the `title` attribute is set to null or false, we don't want to give the\n // avatar a title. On the other hand, if it hasn't been given at all, we can\n // safely default it to the user's username.\n const hasTitle = attrs.title === 'undefined' || attrs.title;\n if (!hasTitle) delete attrs.title;\n\n // If a user has been passed, then we will set up an avatar using their\n // uploaded image, or the first letter of their username if they haven't\n // uploaded one.\n if (user) {\n const username = user.displayName() || '?';\n const avatarUrl = user.avatarUrl();\n\n if (hasTitle) attrs.title = attrs.title || username;\n\n if (avatarUrl) {\n return \n \n {children}\n \n
\n );\n }\n}\n","import Button from './Button';\n\n/**\n * The `LinkButton` component defines a `Button` which links to a route.\n *\n * ### Props\n *\n * All of the props accepted by `Button`, plus:\n *\n * - `active` Whether or not the page that this button links to is currently\n * active.\n * - `href` The URL to link to. If the current URL `m.route()` matches this,\n * the `active` prop will automatically be set to true.\n */\nexport default class LinkButton extends Button {\n static initProps(props) {\n props.active = this.isActive(props);\n props.config = props.config || m.route;\n }\n\n view() {\n const vdom = super.view();\n\n vdom.tag = 'a';\n\n return vdom;\n }\n\n /**\n * Determine whether a component with the given props is 'active'.\n *\n * @param {Object} props\n * @return {Boolean}\n */\n static isActive(props) {\n return typeof props.active !== 'undefined'\n ? props.active\n : m.route() === props.href;\n }\n}\n","import Component from '../Component';\n\n/**\n * The `Separator` component defines a menu separator item.\n */\nclass Separator extends Component {\n view() {\n return - \n {listItems(controls.concat(dismissControl))}\n
)/g, '$1 ')\n .replace(/