@dnncommunity/dnn-elements 0.13.0-beta.1

package/dist/esm/dnn-button.entry.js

@@ -0,0 +1,84 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-6c0764e5.js';
+
+const dnnButtonCss = ":host{--background-color:transparent;--color:#333;--border-size:1px;--border-color:var(--backround-color);--border-radius:var(--dnn-controls-radius, 5px);--padding:var(--dnn-controls-padding, 5px);display:inline-block;width:auto}:host(.disabled){pointer-events:none}:host(.primary){--background-color:var(--dnn-color-primary, blue);--color:var(--dnn-color-primary-contrast, white);--focus-color:var(--background-color)}:host(.primary.reversed){--background-color:var(--dnn-color-primary-contrast, white);--color:var(--dnn-color-primary, blue);--border-color:var(--dnn-color-primary, blue);--focus-color:var(--color)}:host(.secondary){--background-color:var(--dnn-color-secondary, green);--color:var(--dnn-color-secondary-contrast, white);--focus-color:var(--background-color)}:host(.secondary.reversed){--background-color:var(--dnn-color-secondary-contrast, white);--color:var(--dnn-color-secondary, blue);--border-color:var(--dnn-color-secondary, blue);--focus-color:var(--color)}:host(.tertiary){--background-color:var(--dnn-color-tertiary, yellow);--color:var(--dnn-color-tertiary-contrast, black);--focus-color:var(--background-color)}:host(.tertiary.reversed){--background-color:var(--dnn-color-tertiary-contrast, white);--color:var(--dnn-color-tertiary, blue);--border-color:var(--dnn-color-tertiary, blue);--focus-color:var(--color)}:host(.hydrated) button{border:var(--border-size) solid var(--border-color);border-radius:var(--border-radius);padding:var(--padding) calc(var(--padding) * 2);background-color:transparent;background-color:var(--background-color);color:var(--color);outline:none}:host(.hydrated) button:focus,:host(.hydrated) button:hover{box-shadow:0 0 2px 2px var(--focus-color)}:host(:disabled,[disabled]) button{pointer-events:none;opacity:0.5}:host(.small) button{padding:calc(var(--padding) / 2) var(--padding);font-size:0.7em}:host(.large) button{padding:calc(var(--padding) * 1.5) calc(var(--padding) * 3);font-size:1.2em}button{height:100%;width:100%;cursor:pointer}";
+
+let DnnButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.confirmed = createEvent(this, "confirmed", 3);
+    this.canceled = createEvent(this, "canceled", 3);
+    /**
+     * Optional button style,
+     * can be either primary, secondary or tertiary and defaults to primary if not specified
+     */
+    this.type = 'primary';
+    /**
+     * Optionally reverses the button style.
+     */
+    this.reversed = false;
+    /**
+     * Optionally sets the button size, small normal or large, defaults to normal
+     */
+    this.size = 'normal';
+    /**
+     * Optionally add a confirmation dialog before firing the action.
+     */
+    this.confirm = false;
+    /**
+     * The text of the yes button for confirmation.
+     */
+    this.confirmYesText = "Yes";
+    /**
+     * The text of the no button for confirmation.
+     */
+    this.confirmNoText = "No";
+    /**
+     * The text of the confirmation message;
+     */
+    this.confirmMessage = "Are you sure ?";
+    /**
+     * Disables the button
+     */
+    this.disabled = false;
+    this.modalVisible = false;
+  }
+  componentDidLoad() {
+    this.el.classList.add(this.type);
+    if (this.reversed) {
+      this.el.classList.add('reversed');
+    }
+    if (this.size !== 'normal') {
+      this.el.classList.add(this.size);
+    }
+    this.modal = this.el.shadowRoot.querySelector('dnn-modal');
+  }
+  handleConfirm() {
+    this.modal.hide();
+    this.modalVisible = false;
+    this.confirmed.emit();
+  }
+  handleCancel() {
+    this.modal.hide();
+    this.modalVisible = false;
+    this.canceled.emit();
+  }
+  handleClick() {
+    if (this.confirm && !this.modalVisible) {
+      this.modal.show();
+      this.modalVisible = true;
+    }
+  }
+  render() {
+    return (h(Host, { disabled: this.disabled, style: { 'pointer-events': this.disabled ? 'none' : 'all' } }, h("button", { class: "button", onClick: () => this.handleClick(), disabled: this.disabled }, h("slot", null)), this.confirm &&
+      h("dnn-modal", { showCloseButton: false, backdropDismiss: false }, h("p", null, this.confirmMessage), h("div", { style: {
+          display: 'flex',
+          justifyContent: 'flex-end'
+        } }, h("dnn-button", { type: 'primary', style: { margin: '5px' }, onClick: () => this.handleConfirm() }, this.confirmYesText), h("dnn-button", { type: 'secondary', style: { margin: '5px' }, onClick: () => this.handleCancel() }, this.confirmNoText)))));
+  }
+  get el() { return getElement(this); }
+};
+DnnButton.style = dnnButtonCss;
+
+export { DnnButton as dnn_button };
+
+//# sourceMappingURL=dnn-button.entry.js.map

package/dist/esm/dnn-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"dnn-button.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,+8DAA+8D;;ICUv9D,SAAS;EALtB;;;;;;;;IAWU,SAAI,GAAyC,SAAS,CAAC;;;;IAKvD,aAAQ,GAAY,KAAK,CAAC;;;;IAK1B,SAAI,GAAkC,QAAQ,CAAC;;;;IAK/C,YAAO,GAAa,KAAK,CAAC;;;;IAK1B,mBAAc,GAAY,KAAK,CAAC;;;;IAKhC,kBAAa,GAAY,IAAI,CAAC;;;;IAK9B,mBAAc,GAAY,gBAAgB,CAAC;;;;IAK3C,aAAQ,GAAY,KAAK,CAAC;IAEzB,iBAAY,GAAY,KAAK,CAAC;GA+ExC;EA1DC,gBAAgB;IACd,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEjC,IAAI,IAAI,CAAC,QAAQ,EAAC;MAChB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;KACnC;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAC;MACzB,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAClC;IAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;GAC5D;EAEO,aAAa;IACnB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1B,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;EAEO,YAAY;IAClB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;GACtB;EAEO,WAAW;IACjB,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY,EAAC;MACrC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;MAClB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;KAC1B;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,KAAK,EAAC,IACtF,cAAQ,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC/E,eAAa,CACN,EACR,IAAI,CAAC,OAAO;MACT,iBAAW,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,IACvD,aAAI,IAAI,CAAC,cAAc,CAAK,EAC5B,WAAK,KAAK,EACR;UACE,OAAO,EAAE,MAAM;UACf,cAAc,EAAE,UAAU;SAC3B,IAED,kBAAY,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,cAAc,CAAc,EAC1H,kBAAY,IAAI,EAAC,WAAW,EAAC,KAAK,EAAE,EAAC,MAAM,EAAE,KAAK,EAAC,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IAAG,IAAI,CAAC,aAAa,CAAc,CACtH,CACI,CAEX,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dnn-button/dnn-button.scss?tag=dnn-button&encapsulation=shadow","./src/components/dnn-button/dnn-button.tsx"],"sourcesContent":[":host {\r\n  --background-color: transparent;\r\n  --color: #333;\r\n  --border-size: 1px;\r\n  --border-color: var(--backround-color);\r\n  --border-radius: var(--dnn-controls-radius, 5px);\r\n  --padding: var(--dnn-controls-padding, 5px);\r\n  display: inline-block;\r\n  width: auto;\r\n}\r\n\r\n:host(.disabled){\r\n  pointer-events: none;\r\n}\r\n\r\n:host(.primary){\r\n  --background-color: var(--dnn-color-primary, blue);\r\n  --color: var(--dnn-color-primary-contrast, white);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.primary.reversed){\r\n  --background-color: var(--dnn-color-primary-contrast, white);\r\n  --color: var(--dnn-color-primary, blue);\r\n  --border-color: var(--dnn-color-primary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.secondary){\r\n  --background-color: var(--dnn-color-secondary, green);\r\n  --color: var(--dnn-color-secondary-contrast, white);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.secondary.reversed){\r\n  --background-color: var(--dnn-color-secondary-contrast, white);\r\n  --color: var(--dnn-color-secondary, blue);\r\n  --border-color: var(--dnn-color-secondary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.tertiary){\r\n  --background-color: var(--dnn-color-tertiary, yellow);\r\n  --color: var(--dnn-color-tertiary-contrast, black);\r\n  --focus-color: var(--background-color);\r\n}\r\n\r\n:host(.tertiary.reversed){\r\n  --background-color: var(--dnn-color-tertiary-contrast, white);\r\n  --color: var(--dnn-color-tertiary, blue);\r\n  --border-color: var(--dnn-color-tertiary, blue);\r\n  --focus-color: var(--color);\r\n}\r\n\r\n:host(.hydrated){\r\n  button{\r\n    border: var(--border-size) solid var(--border-color);\r\n    border-radius: var(--border-radius);\r\n    padding: var(--padding) calc(var(--padding) * 2);\r\n    background-color: transparent;\r\n    background-color: var(--background-color);\r\n    color: var(--color);\r\n    outline: none;\r\n    &:focus, &:hover{\r\n      box-shadow: 0 0 2px 2px var(--focus-color);\r\n    }\r\n  }\r\n}\r\n\r\n:host(:disabled, [disabled]){\r\n  button{\r\n    pointer-events: none;\r\n    opacity: 0.5;\r\n  }\r\n}\r\n\r\n:host(.small){\r\n  button{\r\n    padding: calc(var(--padding) / 2) var(--padding);\r\n    font-size: 0.7em;\r\n  }\r\n}\r\n\r\n:host(.large){\r\n  button{\r\n    padding: calc(var(--padding) * 1.5) calc(var(--padding) * 3);\r\n    font-size: 1.2em;\r\n  }\r\n}\r\n\r\nbutton{\r\n  height: 100%;\r\n  width: 100%;\r\n  cursor: pointer;\r\n}","import { Component, Element, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n/**\r\n * @slot Content of the button\r\n */\r\n@Component({\r\n  tag: 'dnn-button',\r\n  styleUrl: 'dnn-button.scss',\r\n  shadow: true\r\n})\r\nexport class DnnButton {\r\n\r\n  /**\r\n   * Optional button style,\r\n   * can be either primary, secondary or tertiary and defaults to primary if not specified\r\n   */\r\n  @Prop() type: 'primary' | 'secondary' | 'tertiary' = 'primary';\r\n\r\n  /**\r\n   * Optionally reverses the button style.\r\n   */\r\n  @Prop() reversed: boolean = false;\r\n\r\n  /**\r\n   * Optionally sets the button size, small normal or large, defaults to normal\r\n   */\r\n  @Prop() size?: 'small' | 'normal' | 'large' = 'normal';\r\n\r\n  /**\r\n   * Optionally add a confirmation dialog before firing the action.\r\n   */\r\n  @Prop() confirm?: boolean = false;\r\n\r\n  /**\r\n   * The text of the yes button for confirmation.\r\n   */\r\n  @Prop() confirmYesText?: string = \"Yes\";\r\n\r\n  /**\r\n   * The text of the no button for confirmation.\r\n   */\r\n  @Prop() confirmNoText?: string = \"No\";\r\n\r\n  /**\r\n   * The text of the confirmation message;\r\n   */\r\n  @Prop() confirmMessage?: string = \"Are you sure ?\";\r\n  \r\n  /**\r\n   * Disables the button\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  @State() modalVisible: boolean = false;\r\n\r\n  @Element() el!: HTMLDnnButtonElement;\r\n\r\n  private modal!: HTMLDnnModalElement;\r\n\r\n  /** \r\n   * Fires when confirm is true and the user confirms the action.\r\n  */\r\n  @Event({\r\n    eventName: 'confirmed',\r\n    bubbles: false,\r\n    cancelable: true,\r\n    composed: true\r\n  }) confirmed: EventEmitter;\r\n\r\n  /**\r\n   * Fires when confirm is true and the user cancels the action.\r\n   */\r\n  @Event({bubbles: false}) canceled: EventEmitter;\r\n\r\n  componentDidLoad(){\r\n    this.el.classList.add(this.type);\r\n    \r\n    if (this.reversed){\r\n      this.el.classList.add('reversed');\r\n    }\r\n\r\n    if (this.size !== 'normal'){\r\n      this.el.classList.add(this.size);\r\n    }\r\n\r\n    this.modal = this.el.shadowRoot.querySelector('dnn-modal');\r\n  }\r\n\r\n  private handleConfirm(){\r\n    this.modal.hide();\r\n    this.modalVisible = false;\r\n    this.confirmed.emit();\r\n  }\r\n\r\n  private handleCancel(){\r\n    this.modal.hide();\r\n    this.modalVisible = false;\r\n    this.canceled.emit();\r\n  }\r\n  \r\n  private handleClick(): void {\r\n    if (this.confirm && !this.modalVisible){\r\n      this.modal.show();\r\n      this.modalVisible = true;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host disabled={this.disabled} style={{'pointer-events': this.disabled ? 'none' : 'all'}}>\r\n        <button class=\"button\" onClick={() => this.handleClick()} disabled={this.disabled}>\r\n          <slot></slot>\r\n        </button>\r\n        {this.confirm &&\r\n            <dnn-modal showCloseButton={false} backdropDismiss={false}>\r\n              <p>{this.confirmMessage}</p>\r\n              <div style={\r\n                {\r\n                  display: 'flex',\r\n                  justifyContent: 'flex-end'\r\n                }\r\n              }>\r\n                <dnn-button type='primary' style={{margin: '5px'}} onClick={() => this.handleConfirm()}>{this.confirmYesText}</dnn-button>\r\n                <dnn-button type='secondary' style={{margin: '5px'}} onClick={() => this.handleCancel()}>{this.confirmNoText}</dnn-button>\r\n              </div>\r\n            </dnn-modal>\r\n          }\r\n      </Host>\r\n    );\r\n  }\r\n  \r\n\r\n}\r\n"],"version":3}