@dnncommunity/dnn-elements 0.14.1 → 0.15.0-beta.3

package/dist/collection/components/dnn-modal/dnn-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"dnn-modal.js","sourceRoot":"","sources":["../../../src/components/dnn-modal/dnn-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOtG,MAAM,OAAO,QAAQ;EALrB;IASE;;OAEG;IACK,oBAAe,GAAY,IAAI,CAAC;IAExC;;;OAGG;IACK,cAAS,GAAY,aAAa,CAAC;IAE3C;;;;OAIG;IACK,oBAAe,GAAa,IAAI,CAAC;IAEhC,YAAO,GAAY,KAAK,CAAC;GA0DnC;EAxDC;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;EACtB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EACvB,CAAC;EAOO,aAAa;IACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;EACxB,CAAC;EAEO,mBAAmB,CAAC,CAAa;IACvC,MAAM,OAAO,GAAI,CAAC,CAAC,MAAsB,CAAC;IAC1C,IAAI,OAAO,CAAC,EAAE,KAAK,UAAU,IAAI,IAAI,CAAC,eAAe,EAAC;MACpD,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,EAAE,EAAC,UAAU,EAChB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACnD,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAEzC,WAAK,KAAK,EAAC,OAAO;UACf,IAAI,CAAC,eAAe;YACnB,cACE,KAAK,EAAC,OAAO,gBACD,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;cAEnC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;gBAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE;gBAAA,YAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU;UAEX,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter, Method, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-modal',\r\n  styleUrl: 'dnn-modal.scss',\r\n  shadow: true\r\n})\r\nexport class DnnModal {\r\n  \r\n  @Element() el!: HTMLDnnModalElement;\r\n  \r\n  /**\r\n   * Pass false to remove the backdrop click auto-dismiss feature.\r\n   */\r\n  @Prop() backdropDismiss: boolean = true;\r\n\r\n  /**\r\n   * Optionally pass the aria-label text for the close button.\r\n   * Defaults to \"Close modal\" if not provided.\r\n   */\r\n  @Prop() closeText?: string = \"Close modal\";\r\n\r\n  /**\r\n   * Optionally you can pass false to not show the close button.\r\n   * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\n   * or provide your own dismissal logic in the modal content.\r\n   */\r\n  @Prop() showCloseButton?: boolean = true;\r\n\r\n  @State() visible: boolean = false;\r\n\r\n  /**\r\n   * Shows the modal\r\n   */\r\n  @Method()\r\n  async show() {\r\n    this.visible = true;\r\n  }\r\n\r\n  /**\r\n   * Hides the modal\r\n   */\r\n  @Method()\r\n  async hide() {\r\n    this.visible = false;\r\n  }\r\n\r\n  /**\r\n   * Fires when the modal is dismissed.\r\n   */\r\n  @Event() dismissed!: EventEmitter;\r\n\r\n  private handleDismiss(){\r\n    this.visible = false;\r\n    this.dismissed.emit();\r\n  }\r\n\r\n  private handleBackdropClick(e: MouseEvent): void {\r\n    const element = (e.target as HTMLElement);\r\n    if (element.id === \"backdrop\" && this.backdropDismiss){\r\n      this.handleDismiss();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"backdrop\"\r\n          class={this.visible ? 'overlay visible' : 'overlay'}\r\n          onClick={e => this.handleBackdropClick(e)}\r\n        >\r\n          <div class=\"modal\">\r\n            {this.showCloseButton &&\r\n              <button\r\n                class=\"close\"\r\n                aria-label={this.closeText}\r\n                onClick={() => this.handleDismiss()}\r\n              >\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\r\n              </button>\r\n            }\r\n            <slot></slot>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dnn-modal.js","sourceRoot":"","sources":["../../../../src/components/dnn-modal/dnn-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAO/F,MAAM,OAAO,QAAQ;EALrB;IASE;;OAEG;IACK,oBAAe,GAAY,IAAI,CAAC;IAExC;;;OAGG;IACK,cAAS,GAAY,aAAa,CAAC;IAE3C;;;;OAIG;IACK,oBAAe,GAAa,IAAI,CAAC;IAEzC;;OAEG;IACmC,YAAO,GAAY,KAAK,CAAC;GA0DhE;EAxDC;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;EACtB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EACvB,CAAC;EAOO,aAAa;IACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;EACxB,CAAC;EAEO,mBAAmB,CAAC,CAAa;IACvC,MAAM,OAAO,GAAI,CAAC,CAAC,MAAsB,CAAC;IAC1C,IAAI,OAAO,CAAC,EAAE,KAAK,UAAU,IAAI,IAAI,CAAC,eAAe,EAAC;MACpD,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,EAAE,EAAC,UAAU,EAChB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACnD,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAEzC,WAAK,KAAK,EAAC,OAAO;UACf,IAAI,CAAC,eAAe;YACnB,cACE,KAAK,EAAC,OAAO,gBACD,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;cAEnC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;gBAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE;gBAAA,YAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU;UAEX,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'dnn-modal',\n  styleUrl: 'dnn-modal.scss',\n  shadow: true\n})\nexport class DnnModal {\n  \n  @Element() el!: HTMLDnnModalElement;\n  \n  /**\n   * Pass false to remove the backdrop click auto-dismiss feature.\n   */\n  @Prop() backdropDismiss: boolean = true;\n\n  /**\n   * Optionally pass the aria-label text for the close button.\n   * Defaults to \"Close modal\" if not provided.\n   */\n  @Prop() closeText?: string = \"Close modal\";\n\n  /**\n   * Optionally you can pass false to not show the close button.\n   * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop\n   * or provide your own dismissal logic in the modal content.\n   */\n  @Prop() showCloseButton?: boolean = true;\n\n  /**\n   * Reflects the visible state of the modal.\n   */\n  @Prop({mutable: true, reflect: true}) visible: boolean = false;\n\n  /**\n   * Shows the modal\n   */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  /**\n   * Hides the modal\n   */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /**\n   * Fires when the modal is dismissed.\n   */\n  @Event() dismissed!: EventEmitter;\n\n  private handleDismiss(){\n    this.visible = false;\n    this.dismissed.emit();\n  }\n\n  private handleBackdropClick(e: MouseEvent): void {\n    const element = (e.target as HTMLElement);\n    if (element.id === \"backdrop\" && this.backdropDismiss){\n      this.handleDismiss();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"backdrop\"\n          class={this.visible ? 'overlay visible' : 'overlay'}\n          onClick={e => this.handleBackdropClick(e)}\n        >\n          <div class=\"modal\">\n            {this.showCloseButton &&\n              <button\n                class=\"close\"\n                aria-label={this.closeText}\n                onClick={() => this.handleDismiss()}\n              >\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\n              </button>\n            }\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dnn-modal/dnn-modal.stories.js

@@ -0,0 +1,47 @@
+import { html } from "lit-html";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import readme from './readme.md';
+export default {
+  title: 'Elements/Modal',
+  component: 'dnn-modal',
+  parameters: {
+    actions: {
+      handles: ['dismissed'],
+    },
+    notes: readme,
+  },
+  argTypes: {
+    'backdrop-dismiss': {
+      control: 'boolean',
+    },
+    'close-text': {
+      control: 'text',
+    },
+    'show-close-button': {
+      control: 'boolean',
+    },
+    'visible': {
+      control: 'boolean',
+    }
+  },
+};
+const Template = (args) => html `
+        <dnn-modal
+            ?backdrop-dismiss=${ifDefined(args.backdropDismiss)}
+            close-text=${ifDefined(args.closeText)}
+            ?show-close-button=${ifDefined(args.showCloseButton)}
+            ?visible=${ifDefined(args.visible)}>
+            ${unsafeHTML(args.slot)}
+        </dnn-modal>
+    `;
+export const Modal = Template.bind({});
+Modal.args = {
+  backdropDismiss: true,
+  closeText: 'Close modal',
+  showCloseButton: true,
+  visible: true,
+  slot: `<h1>Welcome to the DNN Modal</h1>
+        <p>This is a modal component that can be used to display content to the user.</p>`
+};
+//# sourceMappingURL=dnn-modal.stories.js.map

package/dist/collection/components/dnn-modal/dnn-modal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dnn-modal.stories.js","sourceRoot":"","sources":["../../../../src/components/dnn-modal/dnn-modal.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAEhE,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACX,KAAK,EAAE,gBAAgB;EACvB,SAAS,EAAE,WAAW;EACtB,UAAU,EAAE;IACR,OAAO,EAAE;MACL,OAAO,EAAE,CAAC,WAAW,CAAC;KACzB;IACD,KAAK,EAAG,MAAM;GACjB;EACD,QAAQ,EAAE;IACN,kBAAkB,EAAE;MAChB,OAAO,EAAE,SAAS;KACrB;IACD,YAAY,EAAE;MACV,OAAO,EAAE,MAAM;KAClB;IACD,mBAAmB,EAAE;MACnB,OAAO,EAAE,SAAS;KACnB;IACD,SAAS,EAAE;MACP,OAAO,EAAE,SAAS;KACrB;GACF;CACE,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CACtB,IAAI,CAAA;;gCAEwB,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;yBACtC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;iCACjB,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;uBACzC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;cAChC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;KAE9B,CAAC;AAEN,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;EACT,eAAe,EAAE,IAAI;EACrB,SAAS,EAAE,aAAa;EACxB,eAAe,EAAE,IAAI;EACrB,OAAO,EAAE,IAAI;EACb,IAAI,EAAE;0FACgF;CACzF,CAAC","sourcesContent":["import { html } from \"lit-html\";\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { Meta } from \"@storybook/web-components\";\nimport readme from './readme.md';\n\nexport default {\n    title: 'Elements/Modal',\n    component: 'dnn-modal',\n    parameters: {\n        actions: {\n            handles: ['dismissed'],\n        },\n        notes:  readme,\n    },\n    argTypes: {\n        'backdrop-dismiss': {\n            control: 'boolean',\n        },\n        'close-text': {\n            control: 'text',\n        },\n        'show-close-button': {\n          control: 'boolean',\n        },\n        'visible': {\n            control: 'boolean',\n        }\n      },\n} as Meta;\n\nconst Template = (args) =>\n    html`\n        <dnn-modal\n            ?backdrop-dismiss=${ifDefined(args.backdropDismiss)}\n            close-text=${ifDefined(args.closeText)}\n            ?show-close-button=${ifDefined(args.showCloseButton)}\n            ?visible=${ifDefined(args.visible)}>\n            ${unsafeHTML(args.slot)}\n        </dnn-modal>\n    `;\n\nexport const Modal = Template.bind({});\nModal.args = {\n    backdropDismiss: true,\n    closeText: 'Close modal',\n    showCloseButton: true,\n    visible: true,\n    slot: `<h1>Welcome to the DNN Modal</h1>\n        <p>This is a modal component that can be used to display content to the user.</p>`\n};\n"]}

package/dist/collection/components/dnn-permissions-grid/dnn-permissions-grid.css

@@ -0,0 +1,83 @@
+:host {
+  display: block;
+}
+
+.add-role-row {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.add-role-row label {
+  margin-right: 0.5em;
+}
+
+.search-user {
+  display: flex;
+  gap: 1em;
+  margin-top: 1em;
+}
+.search-user .search-control {
+  position: relative;
+}
+.search-user .search-control dnn-collapsible {
+  position: absolute;
+  left: 0;
+  top: calc(100% - 2px);
+  width: 100%;
+  box-shadow: 0px 4px 4px;
+}
+.search-user .search-control dnn-collapsible .dropdown {
+  background-color: white;
+  border: 1px solid lightgray;
+  display: flex;
+  flex-direction: column;
+}
+.search-user .search-control dnn-collapsible .dropdown button {
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid lightgray;
+  padding: 0.25em;
+  margin: 0;
+  text-align: left;
+}
+
+table {
+  border: 1px solid lightgray;
+  border-collapse: collapse;
+  margin-top: 1em;
+}
+table thead {
+  text-align: center;
+}
+table thead tr {
+  border-bottom: 1px solid lightgray;
+}
+table thead th {
+  background-color: lightgray;
+  padding: 0.25em 0.5em;
+}
+table thead th:first-child {
+  border-right: 1px solid lightgray;
+}
+table tbody tr {
+  border-bottom: 1px dotted lightgray;
+}
+table tbody tr th {
+  text-align: left;
+  border-right: 1px solid lightgray;
+  padding: 0 0.5em;
+}
+table tbody tr td {
+  text-align: center;
+}
+table tbody tr td dnn-checkbox span {
+  display: none;
+}
+table tbody tr td button {
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  margin-right: 1em;
+}