@api-client/ui 0.0.1

package/dist/elements/amf/styles/SchemaCommon.js

@@ -0,0 +1,397 @@
+import { css } from "lit";
+export default css `
+  :host {
+    --column-padding-left: 84px;
+    --property-border-width: 3px;
+    --property-border-color: var(--md-sys-color-surface-tint, #2196f3);
+    --property-container-padding: 12px;
+  }
+
+  .property-container {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .property-container.simple {
+    flex-direction: column;
+  }
+
+  .property-border {
+    width: var(--property-border-width);
+    min-width: var(--property-border-width);
+    align-self: stretch;
+    background-color: var(--property-border-color);
+  }
+
+  .property-value {
+    padding: var(--property-container-padding) 0px;
+    flex: 1;
+
+
+    font-family: var(--md-sys-typescale-body-large-font-family-name);
+    font-style: var(--md-sys-typescale-body-large-font-family-style);
+    font-weight: var(--md-sys-typescale-body-large-font-weight);
+    font-size: var(--md-sys-typescale-body-large-font-size);
+    letter-spacing: var(--md-sys-typescale-body-large-tracking);
+    line-height: var(--md-sys-typescale-body-large-height);
+    text-transform: var(--md-sys-typescale-body-large-text-transform);
+    text-decoration: var(--md-sys-typescale-body-large-text-decoration);
+  }
+
+  .property-container:last-of-type .property-border {
+    align-self: flex-start;
+    /* padding of the content container + title container / 2 + border size  / 2 */
+    height: calc(var(--property-container-padding) + 52px / 2 + var(--property-border-width) / 2);
+    border-bottom-left-radius: var(--property-border-width);
+  }
+
+  .and-union-member:not(:last-of-type) .property-container:last-of-type .property-border {
+    align-self: stretch;
+    height: auto;
+    border-bottom-left-radius: 0;
+  }
+
+  .inheritance-label {
+    border-left: var(--property-border-width) var(--property-border-color) dashed;
+    padding: 24px 12px;
+    margin: 0;
+  }
+
+  .shape-children .property-container:first-of-type .property-border {
+    border-top-right-radius: var(--property-border-width);
+  }
+
+  .shape-children {
+    display: flex;
+    position: relative;
+  }
+
+  .shape-children > .property-border {
+    background-color: var(--property-children-border-color, #bdbdbd);
+    margin-right: 21px;
+  }
+
+  .shape-children::before {
+    content: '';
+    width: calc(18px + var(--property-border-width) * 2);
+    height: var(--property-border-width);
+    background-color: var(--property-border-color);
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    border-bottom-left-radius: var(--property-border-width);
+  }
+
+  /* :not(.and-union-member) > :last-of-type > .property-border {
+    background-color: transparent;
+  } */
+
+  .union-options {
+    padding: 12px 0px 12px 20px;
+    border-left: var(--property-border-width) var(--property-border-color) dashed;
+    box-sizing: border-box;
+  }
+
+  .shape-children:last-of-type > .property-border {
+    margin-bottom: 60px;
+  }
+
+  .property-decorator {
+    width: var(--column-padding-left);
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    padding-right: 20px;
+    color: var(--property-border-color);
+    box-sizing: border-box;
+  }
+
+  .property-decorator hr {
+    width: 100%;
+    border-color: currentColor;
+    border-width: var(--property-border-width);
+    border-style: solid;
+    border-top: none;
+  }
+
+  .property-decorator.scalar::after {
+    content: "";
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    border-radius: 50%;
+    background-color: transparent;
+    border: 3px solid currentColor;
+  }
+
+  .property-decorator.object::after {
+    content: "";
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    background-color: transparent;
+    border: 3px solid currentColor;
+  }
+
+  .property-decorator.object .object-toggle-icon {
+    cursor: pointer;
+  }
+
+  .object-toggle-icon {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    fill: currentColor;
+    transition: transform 0.23s linear;
+  }
+
+  .object-toggle-icon.opened {
+    transform: rotate(90deg);
+  }
+
+  .property-headline,
+  .property-container.simple .name-column {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    height: 52px;
+  }
+
+  .property-container:not(.simple) .name-column {
+    width: 140px;
+    margin-right: 20px;
+  }
+
+  .property-container:not(.simple) .description-column {
+    padding-left: var(--column-padding-left);
+  }
+
+  .property-container:not(.simple) .details-column {
+    padding-left: var(--column-padding-left);
+  }
+
+  .details-column {
+    align-self: stretch;
+  }
+
+  .param-name {
+    word-break: break-all;
+  }
+
+  .param-name .param-label {
+    font-family: var(--md-sys-typescale-label-large-font-family-name);
+    font-style: var(--md-sys-typescale-label-large-font-family-style);
+    font-weight: var(--md-sys-typescale-label-large-font-weight);
+    font-size: var(--md-sys-typescale-label-large-font-size);
+    letter-spacing: var(--md-sys-typescale-label-large-tracking);
+    line-height: var(--md-sys-typescale-label-large-height);
+    text-transform: var(--md-sys-typescale-label-large-text-transform);
+    text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+  }
+
+  .param-name.required::after {
+    content: '*';
+    margin-left: -4px;
+  }
+
+  .param-name.deprecated {
+    text-decoration: line-through;
+  }
+
+  .param-name-secondary {
+    margin-left: 8px;
+  }
+
+  .headline-separator {
+    display: inline-block;
+    width: 1px;
+    background-color: gray;
+    align-self: stretch;
+    margin: 12px 20px;
+  }
+
+  .param-type {
+    margin: 12px 12px 12px 0;
+  }
+
+  .schema-property-item {
+    display: flex;
+    align-items: flex-start;
+    margin: 8px 0;
+  }
+
+  .schema-property-label {
+    margin-right: 8px;
+    font-family: var(--md-sys-typescale-label-medium-font-family-name);
+    font-style: var(--md-sys-typescale-label-medium-font-family-style);
+    font-weight: var(--md-sys-typescale-label-medium-font-weight);
+    font-size: var(--md-sys-typescale-label-medium-font-size);
+    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+    line-height: var(--md-sys-typescale-label-medium-height);
+    text-transform: var(--md-sys-typescale-label-medium-text-transform);
+    text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
+  }
+
+  .schema-property-label.example {
+    margin-top: 8px;
+  }
+
+  .schema-property-value {
+    word-break: break-all;
+    font-family: var(--md-sys-typescale-body-medium-font-family-name);
+    font-style: var(--md-sys-typescale-body-medium-font-family-style);
+    font-weight: var(--md-sys-typescale-body-medium-font-weight);
+    font-size: var(--md-sys-typescale-body-medium-font-size);
+    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+    line-height: var(--md-sys-typescale-body-medium-height);
+    text-transform: var(--md-sys-typescale-body-medium-text-transform);
+    text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+  }
+
+  .enum-items {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+  }
+
+  .enum-items li {
+    list-style: none;
+  }
+
+  .schema-example {
+    margin-bottom: 12px;
+  }
+
+  .schema-example pre {
+    white-space: pre-wrap;
+    word-break: break-all;
+    margin: 0;
+    padding: 8px 4px;
+  }
+
+  .schema-example summary {
+    font-size: 1.1rem;
+    padding: 8px 12px;
+    border-radius: 8px;
+    cursor: default;
+    
+    background-color: var(--md-sys-color-surface-variant);
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  .schema-example[open] summary {
+    border-bottom-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  .example-content {
+    background-color: var(--md-sys-color-surface-variant);
+    color: var(--md-sys-color-on-surface-variant);
+
+    border-bottom-right-radius: 8px;
+    border-bottom-left-radius: 8px;
+    padding: 0 8px;
+  }
+
+  .code-value {
+    margin: 0px 4px;
+    padding: 2px 4px;
+    background-color: var(--code-background-color);
+    word-break: break-all;
+    white-space: pre-wrap;
+  }
+
+  .code-value.inline {
+    padding: 0 4px;
+  }
+
+  .code-value,
+  .code-value code {
+    font-family: var(--code-font-family);
+    user-select: text;
+  }
+
+  .property-details {
+    margin: 20px 0;
+  }
+
+  .property-details summary {
+    margin: 20px 0;
+    cursor: default;
+  }
+  .property-details summary .label {
+    margin-left: 8px;
+  }
+
+  .example-items {
+    margin: 0;
+    padding: 0;
+    flex: 1;
+
+    font-family: var(--md-sys-typescale-body-medium-font-family-name);
+    font-style: var(--md-sys-typescale-body-medium-font-family-style);
+    font-weight: var(--md-sys-typescale-body-medium-font-weight);
+    font-size: var(--md-sys-typescale-body-medium-font-size);
+    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+    line-height: var(--md-sys-typescale-body-medium-height);
+    text-transform: var(--md-sys-typescale-body-medium-text-transform);
+    text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+  }
+
+  .example-items li {
+    display: block;
+    margin: 4px 0;
+    padding: 4px;
+    width: 100%;
+    white-space: pre-wrap;
+    
+    font-family: var(--md-sys-typescale-body-medium-font-family-name);
+    font-style: var(--md-sys-typescale-body-medium-font-family-style);
+    font-weight: var(--md-sys-typescale-body-medium-font-weight);
+    font-size: var(--md-sys-typescale-body-medium-font-size);
+    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+    line-height: var(--md-sys-typescale-body-medium-height);
+    text-transform: var(--md-sys-typescale-body-medium-text-transform);
+    text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+  }
+
+  .pill {
+    background-color: var(--pill-background-color, var(--api-type-document-trait-background-color, #e5e5e5));
+    color: var(--pill-color, var(--api-type-document-trait-color, var(--primary-text-color, #000)));
+    border-radius: var(--pill-border-radius, var(--api-type-document-trait-border-radius, 12px));
+    padding: var(--pill-padding, var(--api-type-document-trait-padding, 2px 12px));
+    margin: 4px;
+
+
+    font-family: var(--md-sys-typescale-label-small-font-family-name);
+    font-style: var(--md-sys-typescale-label-small-font-family-style);
+    font-weight: var(--md-sys-typescale-label-small-font-weight);
+    font-size: var(--md-sys-typescale-label-small-font-size);
+    letter-spacing: var(--md-sys-typescale-label-small-tracking);
+    line-height: var(--md-sys-typescale-label-small-height);
+    text-transform: var(--md-sys-typescale-label-small-text-transform);
+    text-decoration: var(--md-sys-typescale-label-small-text-decoration);
+  }
+
+  .pill.warning {
+    background-color: var(--pill-warning-background-color, #ffc107);
+    color: var(--pill-warning-color, var(--primary-text-color, #000));
+  }
+
+  .pill:first-child {
+    margin-left: 0;
+  }
+
+  .pill:last-child {
+    margin-right: 0;
+  }
+
+  .param-pills {
+    display: flex;
+    align-items: center;
+  }
+`;
+//# sourceMappingURL=SchemaCommon.js.map

package/dist/elements/amf/styles/SchemaCommon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SchemaCommon.js","sourceRoot":"","sources":["../../../../src/elements/amf/styles/SchemaCommon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0YjB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport default css`\n  :host {\n    --column-padding-left: 84px;\n    --property-border-width: 3px;\n    --property-border-color: var(--md-sys-color-surface-tint, #2196f3);\n    --property-container-padding: 12px;\n  }\n\n  .property-container {\n    display: flex;\n    align-items: flex-start;\n  }\n\n  .property-container.simple {\n    flex-direction: column;\n  }\n\n  .property-border {\n    width: var(--property-border-width);\n    min-width: var(--property-border-width);\n    align-self: stretch;\n    background-color: var(--property-border-color);\n  }\n\n  .property-value {\n    padding: var(--property-container-padding) 0px;\n    flex: 1;\n\n\n    font-family: var(--md-sys-typescale-body-large-font-family-name);\n    font-style: var(--md-sys-typescale-body-large-font-family-style);\n    font-weight: var(--md-sys-typescale-body-large-font-weight);\n    font-size: var(--md-sys-typescale-body-large-font-size);\n    letter-spacing: var(--md-sys-typescale-body-large-tracking);\n    line-height: var(--md-sys-typescale-body-large-height);\n    text-transform: var(--md-sys-typescale-body-large-text-transform);\n    text-decoration: var(--md-sys-typescale-body-large-text-decoration);\n  }\n\n  .property-container:last-of-type .property-border {\n    align-self: flex-start;\n    /* padding of the content container + title container / 2 + border size  / 2 */\n    height: calc(var(--property-container-padding) + 52px / 2 + var(--property-border-width) / 2);\n    border-bottom-left-radius: var(--property-border-width);\n  }\n\n  .and-union-member:not(:last-of-type) .property-container:last-of-type .property-border {\n    align-self: stretch;\n    height: auto;\n    border-bottom-left-radius: 0;\n  }\n\n  .inheritance-label {\n    border-left: var(--property-border-width) var(--property-border-color) dashed;\n    padding: 24px 12px;\n    margin: 0;\n  }\n\n  .shape-children .property-container:first-of-type .property-border {\n    border-top-right-radius: var(--property-border-width);\n  }\n\n  .shape-children {\n    display: flex;\n    position: relative;\n  }\n\n  .shape-children > .property-border {\n    background-color: var(--property-children-border-color, #bdbdbd);\n    margin-right: 21px;\n  }\n\n  .shape-children::before {\n    content: '';\n    width: calc(18px + var(--property-border-width) * 2);\n    height: var(--property-border-width);\n    background-color: var(--property-border-color);\n    position: absolute;\n    left: 0px;\n    top: 0px;\n    border-bottom-left-radius: var(--property-border-width);\n  }\n\n  /* :not(.and-union-member) > :last-of-type > .property-border {\n    background-color: transparent;\n  } */\n\n  .union-options {\n    padding: 12px 0px 12px 20px;\n    border-left: var(--property-border-width) var(--property-border-color) dashed;\n    box-sizing: border-box;\n  }\n\n  .shape-children:last-of-type > .property-border {\n    margin-bottom: 60px;\n  }\n\n  .property-decorator {\n    width: var(--column-padding-left);\n    align-self: stretch;\n    display: flex;\n    align-items: center;\n    padding-right: 20px;\n    color: var(--property-border-color);\n    box-sizing: border-box;\n  }\n\n  .property-decorator hr {\n    width: 100%;\n    border-color: currentColor;\n    border-width: var(--property-border-width);\n    border-style: solid;\n    border-top: none;\n  }\n\n  .property-decorator.scalar::after {\n    content: \"\";\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    min-width: 16px;\n    border-radius: 50%;\n    background-color: transparent;\n    border: 3px solid currentColor;\n  }\n\n  .property-decorator.object::after {\n    content: \"\";\n    display: inline-block;\n    width: 16px;\n    height: 16px;\n    min-width: 16px;\n    background-color: transparent;\n    border: 3px solid currentColor;\n  }\n\n  .property-decorator.object .object-toggle-icon {\n    cursor: pointer;\n  }\n\n  .object-toggle-icon {\n    width: 24px;\n    height: 24px;\n    min-width: 24px;\n    fill: currentColor;\n    transition: transform 0.23s linear;\n  }\n\n  .object-toggle-icon.opened {\n    transform: rotate(90deg);\n  }\n\n  .property-headline,\n  .property-container.simple .name-column {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    height: 52px;\n  }\n\n  .property-container:not(.simple) .name-column {\n    width: 140px;\n    margin-right: 20px;\n  }\n\n  .property-container:not(.simple) .description-column {\n    padding-left: var(--column-padding-left);\n  }\n\n  .property-container:not(.simple) .details-column {\n    padding-left: var(--column-padding-left);\n  }\n\n  .details-column {\n    align-self: stretch;\n  }\n\n  .param-name {\n    word-break: break-all;\n  }\n\n  .param-name .param-label {\n    font-family: var(--md-sys-typescale-label-large-font-family-name);\n    font-style: var(--md-sys-typescale-label-large-font-family-style);\n    font-weight: var(--md-sys-typescale-label-large-font-weight);\n    font-size: var(--md-sys-typescale-label-large-font-size);\n    letter-spacing: var(--md-sys-typescale-label-large-tracking);\n    line-height: var(--md-sys-typescale-label-large-height);\n    text-transform: var(--md-sys-typescale-label-large-text-transform);\n    text-decoration: var(--md-sys-typescale-label-large-text-decoration);\n  }\n\n  .param-name.required::after {\n    content: '*';\n    margin-left: -4px;\n  }\n\n  .param-name.deprecated {\n    text-decoration: line-through;\n  }\n\n  .param-name-secondary {\n    margin-left: 8px;\n  }\n\n  .headline-separator {\n    display: inline-block;\n    width: 1px;\n    background-color: gray;\n    align-self: stretch;\n    margin: 12px 20px;\n  }\n\n  .param-type {\n    margin: 12px 12px 12px 0;\n  }\n\n  .schema-property-item {\n    display: flex;\n    align-items: flex-start;\n    margin: 8px 0;\n  }\n\n  .schema-property-label {\n    margin-right: 8px;\n    font-family: var(--md-sys-typescale-label-medium-font-family-name);\n    font-style: var(--md-sys-typescale-label-medium-font-family-style);\n    font-weight: var(--md-sys-typescale-label-medium-font-weight);\n    font-size: var(--md-sys-typescale-label-medium-font-size);\n    letter-spacing: var(--md-sys-typescale-label-medium-tracking);\n    line-height: var(--md-sys-typescale-label-medium-height);\n    text-transform: var(--md-sys-typescale-label-medium-text-transform);\n    text-decoration: var(--md-sys-typescale-label-medium-text-decoration);\n  }\n\n  .schema-property-label.example {\n    margin-top: 8px;\n  }\n\n  .schema-property-value {\n    word-break: break-all;\n    font-family: var(--md-sys-typescale-body-medium-font-family-name);\n    font-style: var(--md-sys-typescale-body-medium-font-family-style);\n    font-weight: var(--md-sys-typescale-body-medium-font-weight);\n    font-size: var(--md-sys-typescale-body-medium-font-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n    text-transform: var(--md-sys-typescale-body-medium-text-transform);\n    text-decoration: var(--md-sys-typescale-body-medium-text-decoration);\n  }\n\n  .enum-items {\n    display: flex;\n    flex-wrap: wrap;\n    margin: 0;\n    padding: 0;\n  }\n\n  .enum-items li {\n    list-style: none;\n  }\n\n  .schema-example {\n    margin-bottom: 12px;\n  }\n\n  .schema-example pre {\n    white-space: pre-wrap;\n    word-break: break-all;\n    margin: 0;\n    padding: 8px 4px;\n  }\n\n  .schema-example summary {\n    font-size: 1.1rem;\n    padding: 8px 12px;\n    border-radius: 8px;\n    cursor: default;\n    \n    background-color: var(--md-sys-color-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n  }\n\n  .schema-example[open] summary {\n    border-bottom-right-radius: 0px;\n    border-bottom-left-radius: 0px;\n  }\n\n  .example-content {\n    background-color: var(--md-sys-color-surface-variant);\n    color: var(--md-sys-color-on-surface-variant);\n\n    border-bottom-right-radius: 8px;\n    border-bottom-left-radius: 8px;\n    padding: 0 8px;\n  }\n\n  .code-value {\n    margin: 0px 4px;\n    padding: 2px 4px;\n    background-color: var(--code-background-color);\n    word-break: break-all;\n    white-space: pre-wrap;\n  }\n\n  .code-value.inline {\n    padding: 0 4px;\n  }\n\n  .code-value,\n  .code-value code {\n    font-family: var(--code-font-family);\n    user-select: text;\n  }\n\n  .property-details {\n    margin: 20px 0;\n  }\n\n  .property-details summary {\n    margin: 20px 0;\n    cursor: default;\n  }\n  .property-details summary .label {\n    margin-left: 8px;\n  }\n\n  .example-items {\n    margin: 0;\n    padding: 0;\n    flex: 1;\n\n    font-family: var(--md-sys-typescale-body-medium-font-family-name);\n    font-style: var(--md-sys-typescale-body-medium-font-family-style);\n    font-weight: var(--md-sys-typescale-body-medium-font-weight);\n    font-size: var(--md-sys-typescale-body-medium-font-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n    text-transform: var(--md-sys-typescale-body-medium-text-transform);\n    text-decoration: var(--md-sys-typescale-body-medium-text-decoration);\n  }\n\n  .example-items li {\n    display: block;\n    margin: 4px 0;\n    padding: 4px;\n    width: 100%;\n    white-space: pre-wrap;\n    \n    font-family: var(--md-sys-typescale-body-medium-font-family-name);\n    font-style: var(--md-sys-typescale-body-medium-font-family-style);\n    font-weight: var(--md-sys-typescale-body-medium-font-weight);\n    font-size: var(--md-sys-typescale-body-medium-font-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n    text-transform: var(--md-sys-typescale-body-medium-text-transform);\n    text-decoration: var(--md-sys-typescale-body-medium-text-decoration);\n  }\n\n  .pill {\n    background-color: var(--pill-background-color, var(--api-type-document-trait-background-color, #e5e5e5));\n    color: var(--pill-color, var(--api-type-document-trait-color, var(--primary-text-color, #000)));\n    border-radius: var(--pill-border-radius, var(--api-type-document-trait-border-radius, 12px));\n    padding: var(--pill-padding, var(--api-type-document-trait-padding, 2px 12px));\n    margin: 4px;\n\n\n    font-family: var(--md-sys-typescale-label-small-font-family-name);\n    font-style: var(--md-sys-typescale-label-small-font-family-style);\n    font-weight: var(--md-sys-typescale-label-small-font-weight);\n    font-size: var(--md-sys-typescale-label-small-font-size);\n    letter-spacing: var(--md-sys-typescale-label-small-tracking);\n    line-height: var(--md-sys-typescale-label-small-height);\n    text-transform: var(--md-sys-typescale-label-small-text-transform);\n    text-decoration: var(--md-sys-typescale-label-small-text-decoration);\n  }\n\n  .pill.warning {\n    background-color: var(--pill-warning-background-color, #ffc107);\n    color: var(--pill-warning-color, var(--primary-text-color, #000));\n  }\n\n  .pill:first-child {\n    margin-left: 0;\n  }\n\n  .pill:last-child {\n    margin-right: 0;\n  }\n\n  .param-pills {\n    display: flex;\n    align-items: center;\n  }\n`;\n"]}

package/dist/elements/authorization/AuthLabels.d.ts

@@ -0,0 +1,3 @@
+export declare const authTypesMap: Record<string, string>;
+export declare function authTypeToLabel(type: string): string;
+//# sourceMappingURL=AuthLabels.d.ts.map

package/dist/elements/authorization/AuthLabels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthLabels.d.ts","sourceRoot":"","sources":["../../../src/elements/authorization/AuthLabels.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAU/C,CAAA;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEpD"}

package/dist/elements/authorization/AuthLabels.js

@@ -0,0 +1,15 @@
+export const authTypesMap = {
+    basic: 'Basic',
+    ntlm: 'NTLM',
+    digest: 'Digest',
+    'oauth 1': 'OAuth 1',
+    'oauth 2': 'OAuth 2',
+    bearer: 'Bearer',
+    'client certificate': 'Client certificate',
+    'open id': 'Open ID Connect',
+    'api key': 'API key',
+};
+export function authTypeToLabel(type) {
+    return authTypesMap[type] || 'Unknown type.';
+}
+//# sourceMappingURL=AuthLabels.js.map

package/dist/elements/authorization/AuthLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthLabels.js","sourceRoot":"","sources":["../../../src/elements/authorization/AuthLabels.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAA2B;IAClD,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,QAAQ;IAChB,oBAAoB,EAAE,oBAAoB;IAC1C,SAAS,EAAE,iBAAiB;IAC5B,SAAS,EAAE,SAAS;CACrB,CAAA;AAED,MAAM,UAAU,eAAe,CAAC,IAAY;IAC1C,OAAO,YAAY,CAAC,IAAI,CAAC,IAAI,eAAe,CAAC;AAC/C,CAAC","sourcesContent":["export const authTypesMap: Record<string, string> = {\n  basic: 'Basic',\n  ntlm: 'NTLM',\n  digest: 'Digest',\n  'oauth 1': 'OAuth 1',\n  'oauth 2': 'OAuth 2',\n  bearer: 'Bearer',\n  'client certificate': 'Client certificate',\n  'open id': 'Open ID Connect',\n  'api key': 'API key',\n}\n\nexport function authTypeToLabel(type: string): string {\n  return authTypesMap[type] || 'Unknown type.';\n}\n"]}

package/dist/elements/authorization/OAuth2Authorize.d.ts

@@ -0,0 +1,35 @@
+import { IOAuth2Authorization, ITokenInfo } from '@api-client/core/build/browser.js';
+import ApiElement from '../ApiElement.js';
+export declare const authorizeHandler: unique symbol;
+/**
+ * An element that utilizes the `OAuth2Authorization` class in a web component.
+ * It handles DOM events to perform the authorization.
+ */
+export default class OAuth2AuthorizationElement extends ApiElement {
+    /**
+     * When set it uses this value to prefix the call to the
+     * OAuth 2 token endpoint. This is to support use cases when
+     * the requests should be proxied through a server to avoid CORS problems.
+     * @attribute
+     */
+    tokenProxy?: string;
+    /**
+     * When set it encodes the token URI value before adding it to the
+     * `tokenProxy`. This is to be used when the proxy takes the target
+     * URL as a query parameter.
+     * @attribute
+     */
+    tokenProxyEncode?: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    [authorizeHandler](event: Event): void;
+    /**
+     * Authorize the user using provided settings.
+     * This is left for compatibility. Use the `OAuth2Authorization` instead.
+     *
+     * @param settings The authorization configuration.
+     */
+    authorize(settings: IOAuth2Authorization): Promise<ITokenInfo>;
+}
+//# sourceMappingURL=OAuth2Authorize.d.ts.map

package/dist/elements/authorization/OAuth2Authorize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OAuth2Authorize.d.ts","sourceRoot":"","sources":["../../../src/elements/authorization/OAuth2Authorize.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAA2F,MAAM,mCAAmC,CAAC;AAE9K,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAE1C,eAAO,MAAM,gBAAgB,eAA6B,CAAC;AAE3D;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,UAAU;IAChE;;;;;OAKG;IACyB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEhD;;;;;OAKG;IACyB,gBAAgB,CAAC,EAAE,OAAO,CAAC;;IAO9C,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAKrC,CAAC,gBAAgB,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAMtC;;;;;OAKG;IACG,SAAS,CAAC,QAAQ,EAAE,oBAAoB,GAAG,OAAO,CAAC,UAAU,CAAC;CAarE"}

package/dist/elements/authorization/OAuth2Authorize.js

@@ -0,0 +1,70 @@
+import { __decorate } from "tslib";
+/* eslint-disable class-methods-use-this */
+import { OAuth2Authorization, EventTypes as CoreEventTypes } from '@api-client/core/build/browser.js';
+import { property } from 'lit/decorators.js';
+import ApiElement from '../ApiElement.js';
+export const authorizeHandler = Symbol('authorizeHandler');
+/**
+ * An element that utilizes the `OAuth2Authorization` class in a web component.
+ * It handles DOM events to perform the authorization.
+ */
+export default class OAuth2AuthorizationElement extends ApiElement {
+    /**
+     * When set it uses this value to prefix the call to the
+     * OAuth 2 token endpoint. This is to support use cases when
+     * the requests should be proxied through a server to avoid CORS problems.
+     * @attribute
+     */
+    tokenProxy;
+    /**
+     * When set it encodes the token URI value before adding it to the
+     * `tokenProxy`. This is to be used when the proxy takes the target
+     * URL as a query parameter.
+     * @attribute
+     */
+    tokenProxyEncode;
+    constructor() {
+        super();
+        this[authorizeHandler] = this[authorizeHandler].bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.eventsTarget.addEventListener(CoreEventTypes.Authorization.OAuth2.authorize, this[authorizeHandler]);
+        this.setAttribute('aria-hidden', 'true');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.eventsTarget.removeEventListener(CoreEventTypes.Authorization.OAuth2.authorize, this[authorizeHandler]);
+    }
+    [authorizeHandler](event) {
+        const e = event;
+        const config = { ...e.detail };
+        e.detail.result = this.authorize(config);
+    }
+    /**
+     * Authorize the user using provided settings.
+     * This is left for compatibility. Use the `OAuth2Authorization` instead.
+     *
+     * @param settings The authorization configuration.
+     */
+    async authorize(settings) {
+        const { tokenProxy, tokenProxyEncode } = this;
+        const options = {};
+        if (tokenProxy && typeof tokenProxy === 'string') {
+            options.tokenProxy = tokenProxy;
+        }
+        if (tokenProxy && tokenProxyEncode && typeof tokenProxyEncode === 'boolean') {
+            options.tokenProxyEncode = tokenProxyEncode;
+        }
+        const auth = new OAuth2Authorization(settings, options);
+        auth.checkConfig();
+        return auth.authorize();
+    }
+}
+__decorate([
+    property({ type: String })
+], OAuth2AuthorizationElement.prototype, "tokenProxy", void 0);
+__decorate([
+    property({ type: String })
+], OAuth2AuthorizationElement.prototype, "tokenProxyEncode", void 0);
+//# sourceMappingURL=OAuth2Authorize.js.map

package/dist/elements/authorization/OAuth2Authorize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OAuth2Authorize.js","sourceRoot":"","sources":["../../../src/elements/authorization/OAuth2Authorize.ts"],"names":[],"mappings":";AAAA,2CAA2C;AAC3C,OAAO,EAAoC,mBAAmB,EAA0B,UAAU,IAAI,cAAc,EAAgB,MAAM,mCAAmC,CAAC;AAC9K,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAE1C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;AAE3D;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,0BAA2B,SAAQ,UAAU;IAChE;;;;;OAKG;IACyB,UAAU,CAAU;IAEhD;;;;;OAKG;IACyB,gBAAgB,CAAW;IAEvD;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7D,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,cAAc,CAAC,aAAa,CAAC,MAAM,CAAC,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAC1G,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAAC,cAAc,CAAC,aAAa,CAAC,MAAM,CAAC,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAC/G,CAAC;IAED,CAAC,gBAAgB,CAAC,CAAC,KAAY;QAC7B,MAAM,CAAC,GAAG,KAAuD,CAAC;QAClE,MAAM,MAAM,GAAG,EAAE,GAAG,CAAC,CAAC,MAAM,EAA0B,CAAC;QACvD,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAC3C,CAAC;IAED;;;;;OAKG;IACH,KAAK,CAAC,SAAS,CAAC,QAA8B;QAC5C,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC;QAC9C,MAAM,OAAO,GAA2B,EAAE,CAAC;QAC3C,IAAI,UAAU,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;YAChD,OAAO,CAAC,UAAU,GAAG,UAAU,CAAC;SACjC;QACD,IAAI,UAAU,IAAI,gBAAgB,IAAI,OAAO,gBAAgB,KAAK,SAAS,EAAE;YAC3E,OAAO,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;SAC7C;QACD,MAAM,IAAI,GAAG,IAAI,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QACxD,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC;IAC1B,CAAC;CACF;AAnD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAqB;AAQpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oEAA4B","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport { IOAuth2Authorization, ITokenInfo, OAuth2Authorization, OauthProcessingOptions, EventTypes as CoreEventTypes, ContextEvent } from '@api-client/core/build/browser.js';\nimport { property } from 'lit/decorators.js';\nimport ApiElement from '../ApiElement.js';\n\nexport const authorizeHandler = Symbol('authorizeHandler');\n\n/**\n * An element that utilizes the `OAuth2Authorization` class in a web component.\n * It handles DOM events to perform the authorization.\n */ \nexport default class OAuth2AuthorizationElement extends ApiElement {\n  /** \n   * When set it uses this value to prefix the call to the \n   * OAuth 2 token endpoint. This is to support use cases when \n   * the requests should be proxied through a server to avoid CORS problems.\n   * @attribute\n   */\n  @property({ type: String }) tokenProxy?: string;\n\n  /**\n   * When set it encodes the token URI value before adding it to the \n   * `tokenProxy`. This is to be used when the proxy takes the target \n   * URL as a query parameter.\n   * @attribute\n   */\n  @property({ type: String }) tokenProxyEncode?: boolean;\n\n  constructor() {\n    super();\n    this[authorizeHandler] = this[authorizeHandler].bind(this);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.eventsTarget.addEventListener(CoreEventTypes.Authorization.OAuth2.authorize, this[authorizeHandler]);\n    this.setAttribute('aria-hidden', 'true');\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.eventsTarget.removeEventListener(CoreEventTypes.Authorization.OAuth2.authorize, this[authorizeHandler]);\n  }\n\n  [authorizeHandler](event: Event): void {\n    const e = event as ContextEvent<IOAuth2Authorization, ITokenInfo>;\n    const config = { ...e.detail } as IOAuth2Authorization;\n    e.detail.result = this.authorize(config);\n  }\n\n  /**\n   * Authorize the user using provided settings.\n   * This is left for compatibility. Use the `OAuth2Authorization` instead.\n   *\n   * @param settings The authorization configuration.\n   */\n  async authorize(settings: IOAuth2Authorization): Promise<ITokenInfo> {\n    const { tokenProxy, tokenProxyEncode } = this;\n    const options: OauthProcessingOptions = {};\n    if (tokenProxy && typeof tokenProxy === 'string') {\n      options.tokenProxy = tokenProxy;\n    }\n    if (tokenProxy && tokenProxyEncode && typeof tokenProxyEncode === 'boolean') {\n      options.tokenProxyEncode = tokenProxyEncode;\n    }\n    const auth = new OAuth2Authorization(settings, options);\n    auth.checkConfig();\n    return auth.authorize();\n  }\n}\n"]}

package/dist/elements/authorization/OidcAuthorize.d.ts

@@ -0,0 +1,31 @@
+import { IOidcTokenError, IOidcTokenInfo, IOAuth2Authorization } from '@api-client/core/build/browser.js';
+import ApiElement from '../ApiElement.js';
+export declare const authorizeHandler: unique symbol;
+export default class OidcAuthorize extends ApiElement {
+    /**
+     * When set it uses this value to prefix the call to the
+     * OAuth 2 token endpoint. This is to support use cases when
+     * the requests should be proxied through a server to avoid CORS problems.
+     * @attribute
+     */
+    tokenProxy?: string;
+    /**
+     * When set it encodes the token URI value before adding it to the
+     * `tokenProxy`. This is to be used when the proxy takes the target
+     * URL as a query parameter.
+     * @attribute
+     */
+    tokenProxyEncode?: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    [authorizeHandler](event: Event): void;
+    /**
+     * Authorize the user using provided settings.
+     * This is left for compatibility. Use the `OAuth2Authorization` instead.
+     *
+     * @param settings The authorization configuration.
+     */
+    authorize(settings: IOAuth2Authorization): Promise<(IOidcTokenInfo | IOidcTokenError)[]>;
+}
+//# sourceMappingURL=OidcAuthorize.d.ts.map

package/dist/elements/authorization/OidcAuthorize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OidcAuthorize.d.ts","sourceRoot":"","sources":["../../../src/elements/authorization/OidcAuthorize.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,oBAAoB,EAAyF,MAAM,mCAAmC,CAAC;AAEjM,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAE1C,eAAO,MAAM,gBAAgB,eAA6B,CAAC;AAE3D,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,UAAU;IACnD;;;;;OAKG;IACyB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEhD;;;;;OAKG;IACyB,gBAAgB,CAAC,EAAE,OAAO,CAAC;;IAO9C,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAKrC,CAAC,gBAAgB,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAMtC;;;;;OAKG;IACG,SAAS,CAAC,QAAQ,EAAE,oBAAoB,GAAG,OAAO,CAAC,CAAC,cAAc,GAAC,eAAe,CAAC,EAAE,CAAC;CAc7F"}

package/dist/elements/authorization/OidcAuthorize.js

@@ -0,0 +1,67 @@
+import { __decorate } from "tslib";
+/* eslint-disable class-methods-use-this */
+import { OidcAuthorization, EventTypes as CoreEventTypes } from '@api-client/core/build/browser.js';
+import { property } from 'lit/decorators.js';
+import ApiElement from '../ApiElement.js';
+export const authorizeHandler = Symbol('authorizeHandler');
+export default class OidcAuthorize extends ApiElement {
+    /**
+     * When set it uses this value to prefix the call to the
+     * OAuth 2 token endpoint. This is to support use cases when
+     * the requests should be proxied through a server to avoid CORS problems.
+     * @attribute
+     */
+    tokenProxy;
+    /**
+     * When set it encodes the token URI value before adding it to the
+     * `tokenProxy`. This is to be used when the proxy takes the target
+     * URL as a query parameter.
+     * @attribute
+     */
+    tokenProxyEncode;
+    constructor() {
+        super();
+        this[authorizeHandler] = this[authorizeHandler].bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.eventsTarget.addEventListener(CoreEventTypes.Authorization.Oidc.authorize, this[authorizeHandler]);
+        this.setAttribute('aria-hidden', 'true');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.eventsTarget.removeEventListener(CoreEventTypes.Authorization.Oidc.authorize, this[authorizeHandler]);
+    }
+    [authorizeHandler](event) {
+        const e = event;
+        const config = { ...e.detail };
+        e.detail.result = this.authorize(config);
+    }
+    /**
+     * Authorize the user using provided settings.
+     * This is left for compatibility. Use the `OAuth2Authorization` instead.
+     *
+     * @param settings The authorization configuration.
+     */
+    async authorize(settings) {
+        const { tokenProxy, tokenProxyEncode } = this;
+        const options = {};
+        if (tokenProxy && typeof tokenProxy === 'string') {
+            options.tokenProxy = tokenProxy;
+        }
+        if (tokenProxy && tokenProxyEncode && typeof tokenProxyEncode === 'boolean') {
+            options.tokenProxyEncode = tokenProxyEncode;
+        }
+        const auth = new OidcAuthorization(settings, options);
+        auth.checkConfig();
+        // FIXME: Fix the typings in the `OidcAuthorization` class.
+        return auth.authorize();
+    }
+}
+__decorate([
+    property({ type: String })
+], OidcAuthorize.prototype, "tokenProxy", void 0);
+__decorate([
+    property({ type: String })
+], OidcAuthorize.prototype, "tokenProxyEncode", void 0);
+//# sourceMappingURL=OidcAuthorize.js.map